将UL添加到LI(不将LI添加到UL)

我正在尝试在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的子代。您能告诉我如何在没有多余的LI的情况下添加UL吗?

GolezTrol

您太复杂了。您已经有了该节点,您只需设置其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);

在您当前的情况下,您将两者混为一谈。您创建了一个new ul,从未使用过。然后您创建一个新的li然后,将其innerHTML设置li为所需的整个HTML块,并将其添加到父级。li您的文档中得到的是newitem你在你的代码中创建。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

将li添加到ul中以查找是否存在

来自分类Dev

将<li>添加到<ul>并删除附加到<ul>的<li>

来自分类Dev

jQuery将CSS类添加到父<ul>元素

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将列表元素动态添加到ul元素

来自分类Dev

从3 ul获得最大li高度并将其添加到所有位置

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

单击提交按钮时如何使用JavaScript将li元素添加到ul

来自分类Dev

Python Selenium将Li添加到ul

来自分类Dev

如何使用C#将“ li”添加到“ ul”标签

来自分类Dev

在将<li>元素添加到<ul>时应用淡入效果

来自分类Dev

将类添加到最接近的ul

来自分类Dev

Javascript使用数组将li添加到ul

来自分类Dev

使用JavaScript将CSS类添加到动态ul li标签

来自分类Dev

将项目添加到ul并将其删除

来自分类Dev

如何使用jQuery将“ <li>”添加到“ <ul>”?

来自分类Dev

将类添加到具有(大于)2 li的ul的ul

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

使用jQuery将子li动态添加到ul

来自分类Dev

如何将类添加到ul li

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

如何在文本框更改时将ul li添加到div中以及如何使用jQuery从div中删除ul li

来自分类Dev

Vuejs 将 css 类添加到数组中的 ul li 列表

来自分类Dev

当导航位于外部文件中时,如何使用 jQuery 将类添加到导航 ul li a?

来自分类Dev

将类添加到直接后代 ul 元素

来自分类Dev

使用javascript将css类添加到ul中的所有li父元素

来自分类Dev

将 <li> 添加到 <ul> 有限制(纯 JS)

Related 相关文章

热门标签

归档