Question

我想在已经存在的UL列表中添加新的li ..

我希望将它添加到预定义的索引中。

.append（）和.prepend（）将li添加到最后一个和第一个。

我想在第二个孩子（li）之后添加li （蛇）..

＆＃13;

 
function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}

＆＃13;

<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

＆＃13;

Answer 1

我会做这样的事情：

  function myFunction(position) {
    var allElems = document.querySelectorAll('#myList li');
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.querySelector('#myList').insertBefore(node, allElems[position - 1])
  }


<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction(3)">Try it</button>

您需要一个参数，表示您希望获得新值。

https://jsfiddle.net/mcjzhr35/

Answer 2

您可以使用after()方法与:eq()选择器一起在jquery中实现此目的：

$("ul li:eq(1)").after($("<li>Water</li>"));

请注意，由于:eq()从零开始，因此索引将从0开始

function myFunction() {
    $("ul li:eq(1)").after($("<li>Water</li>"));

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

Answer 3

对于非jQuery方式，您可以使用.querySelectorAll("li")[1]然后选择索引。

请记住，0 =第一个元素（Crow），1 = Snake，2 = Lion等。

＆＃13;

function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    document.getElementById("myList").querySelectorAll("li")[1].appendChild(node);
}

＆＃13;

<ul id="myList">
  <li>Crow</li>
  <li>snake</li>
  <li>Lion</li>
  <li>Tea</li>
</ul>

<p>Help Me add water after snake</p>

<button onclick="myFunction()">Try it</button>

＆＃13;

Answer 4

您可以将insertBefore()与nth-child选择器一起使用。

function myFunction() {
    var node = document.createElement("LI");
    var textnode = document.createTextNode("water");
    node.appendChild(textnode);
    //document.getElementById("myList").appendChild(node);
    var priorNode = document.querySelector("#myList li:nth-child(3)");
    document.getElementById("myList").insertBefore(node, priorNode);
}

querySelector用于获取第三个li，insertBefore在此之前添加水节点。

Answer 5

如果你想要纯JS方法尝试insertBefore，你只需要在之前插入的parentNode和节点。

              function myFunction() {
                 var node = document.createElement("LI");
                 var textnode = document.createTextNode("water");
                 node.appendChild(textnode);

                var myList = window.document.getElementById("myList");
                var lion = window.document.getElementById("lion");
                //assume lion has an id
                myList.insertBefore(node, lion);
               }

在它们之间添加一个li而不是append或prepend

5 个答案: