如何在已有UL列表的指定位置插入新LI元素（替代append/prepend）

没问题！要实现把内容为water的<li>添加到snake之后，你可以利用DOM的insertBefore()方法——它不仅能在元素前插入，只要指定正确的参考节点，就能实现“在目标元素后插入”的效果。下面给你两种实用的实现方案：

方案1：通过目标元素定位（更灵活，适合动态列表） #

这种方法会先找到内容为snake的<li>，然后在它的下一个兄弟节点前插入新元素，相当于直接加到snake后面：

function myFunction() { 
  // 创建新的li元素和文本节点
  var node = document.createElement("LI"); 
  var textnode = document.createTextNode("water"); 
  node.appendChild(textnode); 

  // 找到内容为snake的li元素（如果列表内容动态变化，用这个方式更可靠）
  var targetLi = Array.from(document.querySelectorAll("#myList li"))
    .find(li => li.textContent.trim() === "snake");

  // 在targetLi的下一个兄弟节点前插入新节点，也就是targetLi的后面
  document.getElementById("myList").insertBefore(node, targetLi.nextSibling); 
}

方案2：通过索引位置定位（适合固定结构的列表） #

如果你的列表结构固定，snake是第二个子元素（DOM集合索引从0开始计数，所以它的索引是1），那么可以直接通过索引定位插入位置：

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

  var list = document.getElementById("myList");
  // 要在第二个元素（snake）后面插入，所以插入到第三个元素（索引2）的前面
  list.insertBefore(node, list.children[2]); 
}

完整可运行代码 #

把修改后的函数和HTML整合在一起，直接就能测试：

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

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

  var targetLi = document.querySelector("#myList li:nth-child(2)");
  document.getElementById("myList").insertBefore(node, targetLi.nextSibling); 
}
</script>

简单解释下原理：insertBefore(newNode, referenceNode)方法会把新节点插入到参考节点的前面。当我们把参考节点设为目标元素的nextSibling（下一个兄弟元素）时，新节点就自然出现在目标元素的后面了——完美解决了append()和prepend()只能加在首尾的局限。

内容的提问来源于stack exchange，提问作者Rohit Kumar