如何使用appendChild方法将元素添加到指定位置（以UL列表插入LI元素为例）

嘿，这个需求很容易实现，咱们有两种简洁的方式可以搞定：

方法1：使用Element.after()（推荐，更直观） #

这个方法是ES6引入的，直接在目标元素的后面插入新元素，代码非常清晰：

// 1. 创建新的LI元素，和你原来的代码一样
var newli = document.createElement("li");
newli.innerHTML = "1";

// 2. 找到内容为"2"的目标LI元素
// 如果确定它是第一个LI，可以直接用这个选择器：
var targetLi = document.querySelector('#ulmain li:nth-child(1)');
// 要是以后LI的位置可能变动，用这种更通用的方式（匹配文本内容）：
// var targetLi = Array.from(document.querySelectorAll('#ulmain li'))
//   .find(item => item.textContent.trim() === '2');

// 3. 直接在目标LI后面插入新元素
targetLi.after(newli);

方法2：使用传统的insertBefore() #

如果需要兼容更老的浏览器（比如IE），可以用父元素的insertBefore()方法，把新元素插到目标LI的下一个兄弟节点之前：

var newli = document.createElement("li");
newli.innerHTML = "1";

var ul = document.getElementById('ulmain');
var targetLi = document.querySelector('#ulmain li:nth-child(1)');

// 插入到目标LI的下一个兄弟节点之前
ul.insertBefore(newli, targetLi.nextSibling);

执行任意一种方法后，你的UL结构都会变成：

<ul id="ulmain">
 <li>2</li>
 <li>1</li>
 <li>3</li>
 <li>4</li>
</ul>

完美满足你的需求~

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