Добавить UL в LI (не добавлять LI в UL)

Question

Я пытаюсь добавить UL внутри LI. У меня есть HTML-дерево, которое выглядит так:

<li id="node0"><a href="#" onclick="Collapse(event)"><img src="file:///C:/drag-drop-folder-tree/images/dhtmlgoodies_minus.gif"></a>All My Windows
<ul style="display: block;" id="tree_ul_0">
<li id="node0" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a href="#">9:00-9:30 moving up</a></li>
<li id="node1" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a href="#">9:00-9:30 moving down</a>

Я пытаюсь использовать Javascript, чтобы добавить новый UL, который будет дочерним по отношению к узлу LI на вершине.

Вот мой код:

 var newul = document.createElement("ul");


 var ulist = document.getElementById("node0");
 var newItem = document.createElement("li");

 newItem.innerHTML = "<ul id='item1'><li id='Item0' ondragenter='return dragEnter(event)' ondragover='allowDrop(event)' ondrop='drop(event)' ondragstart='drag(event)' draggable='True'><a onclick='Collapse(event)' href='#'><img src='dhtmlgoodies_minus.gif'></a><text>hello</text></li></ul>"

 ulist.appendChild(newItem); 

Когда я выполняю этот код, я получаю:

<li>
<ul id="item1">
<li id="Item0" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a onclick="Collapse(event)" href="#"><img src="dhtmlgoodies_minus.gif"></a><text>hello</text>
</li>
</ul>
</li>

Так что добавляет новое:

<LI>

который является потомком node0

Я хотел бы, чтобы мой UL item1 был дочерним для node0. Можете ли вы сказать мне, как добавить UL без получения постороннего LI?

Answer 1

Вы слишком усложнили это. У вас уже есть узел, и вы можете просто установить его innerHTML:

var ulist = document.getElementById("node0");

ulist.innerHTML = "<ul id='item1'><li id='Item0' ondragenter='return dragEnter(event)' ondragover='allowDrop(event)' ondrop='drop(event)' ondragstart='drag(event)' draggable='True'><a onclick='Collapse(event)' href='#'><img src='dhtmlgoodies_minus.gif'></a><text>hello</text></li></ul>";

В качестве альтернативы, вы можете создать в нем ul и li и добавить их, но затем вам нужно установить добавление подходящего элемента, ul, к узлу. Это может легко стать большим количеством кода. Фрагмент ниже даже не устанавливает все события и не создает a элемент внутри узла.

var ulist = document.getElementById("node0");

// Create the new ul.
var newul = document.createElement("ul");
newul.id = 'item1';

// Create the new li
var newItem = document.createElement("li");
newitem.id = 'Item0';
newitem.ondragenter = dragEnter;
// ... and so on
newitem.setAttribute('draggable', true);

// Append the li to the ul
newul.appendChild(newItem);
// And append the ul to the parent li.
ulist.appendChild(newul);

В вашей текущей ситуации вы смешали оба. Вы создаете новый ul, который никогда не используется. Затем вы создаете новый li, Затем вы устанавливаете innerHTML этого li ко всему фрагменту HTML, который вы хотите иметь, и добавьте его к родителю. li вы получаете в своем документе является newitem вы создали в своем коде.