比如现在我有这样的一个div
html
<div> <li>一</li> <li>二</li> <li>三</li> <li>四</li> </div>
我现在需要添加一个li
到这个di
v中,这个li
在div
中的位置是在第二位,或者第三位怎么实现?
比如这样子就可以了,我也是JS新手
<div id="myDiv">
<li id="li1">一</li>
<li id="li2">二</li>
<li id="li3">三</li>
<li id="li4">四</li>
</div>
<script>
var myDiv = document.getElementById("myDiv");
var li = document.getElementById("li2");
var newli = document.createElement("li");
myDiv.insertBefore(newli,li);
</script>
html:
<div id="myDiv">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</div>
javascript:
var divNode = document.getElementById("myDiv");
var liNode = document.createElement("li");
liNode.innerHTML = 'xxx';
divNode.insertBefore(liNode, divNode.children[1]); // 插入到第二个子节点之前
建议楼主可以深入研究下 jQuery 的 sizzle
以下示例在第三個節點前插入:
html:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
script:
var li2 = document.querySelector("ul").querySelectorAll("li")[2],
li = document.createElement("li");
li2.parentNode.insertBefore(li, li2);
insertBefore