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

Question

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

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

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

Answer 1

html:

<p id="myp">
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</p>

javascript:

var pNode = document.getElementById("myp");
var liNode = document.createElement("li");
liNode.innerHTML = 'xxx';
pNode.insertBefore(liNode, pNode.children[1]); // 插入到第二个子节点之前

Answer 2

比如这样子就可以了，我也是JS新手

<p id="myp">
    <li id="li1">一</li>
    <li id="li2">二</li>
    <li id="li3">三</li>
    <li id="li4">四</li>
</p>
<script>
    var myp = document.getElementById("myp");
    var li = document.getElementById("li2");
    var newli = document.createElement("li");

    myp.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