将UL添加到LI（不将UL添加到UL）

Question

我想在LI里面添加一个UL。 我有一个看起来像这样的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节点0的子节点。

这是我的代码：

 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的子节点

我希望我的item1 UL成为node0的子节点。 你能告诉我如何在不获得无关的LI的情况下添加UL吗？

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 。 然后将该li的innerHTML设置为您想要的整个HTML块，并将其添加到父级。 您在文档中获得的li是您在代码中创建的newitem 。