如何通过JavaScript添加一个标签?

Question

比如现在我有这样的一个div

html<div>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</div>

我现在需要添加一个li到这个div中,这个li在div中的位置是在第二位,或者第三位怎么实现?

Answer 1

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]); // 插入到第二个子节点之前

Answer 2

比如这样子就可以了，我也是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>

Answer 3

以下示例在第三個節點前插入：

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);

Answer 4

建议楼主可以深入研究下 jQuery 的 sizzle

Answer 5

insertBefore