我正在尝试在 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 node0 的子节点。
这是我的代码:
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 的子节点。你能告诉我如何添加 UL 而不会获得无关的 LI 吗?
最佳答案
你把事情搞得太复杂了。您已经获得了该节点,您只需设置其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 block ,并将其添加到父级。您在文档中获得的 li
是您在代码中创建的 newitem
。
关于javascript - 将 UL 添加到 LI(不将 LI 添加到 UL),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36877911/