appendchild总是在父元素末尾添加子节点，insertbefore则在指定子节点前插入新节点；前者语法为parent.appendchild(child)，后者为parent.insertbefore(newnode, refnode)，refnode为父元素的直接子节点或null。
在 JavaScript 中，appendChild 和 insertBefore 都是用来向父元素添加子节点的方法，但它们的插入位置和调用方式不同：前者总是在末尾追加，后者可指定插入位置。
appendChild：在父元素末尾添加子节点
appendChild 最简单直接，把新节点添加到父元素的子节点列表最后面。如果该节点已存在于 DOM 中，会先从原位置移除，再插入到新位置（即“移动”而非复制）。
- 语法：
parentElement.appendChild(childNode) - 只能传入一个节点（不能是字符串或 NodeList，需先创建或获取 Element/Text 节点）
- 返回被添加的节点，可用于链式操作（但一般不常用）
示例：
const ul = document.querySelector('ul');
const newLi = document.createElement('li');
newLi.textContent = '这是新项';
ul.appendChild(newLi); // 添加到 ul 最后
insertBefore：在指定子节点前插入新节点
insertBefore 更灵活，允许你把新节点插在父元素某个已有子节点的前面。如果第二个参数为 null，效果等同于 appendChild（即插到最后）。
- 语法：
parentElement.insertBefore(newNode, referenceNode) -
referenceNode必须是parentElement的**直接子节点**，否则报错；可以是null - 若
referenceNode不存在或不是子节点，会抛出NotFoundError
示例：
const ul = document.querySelector('ul');
const firstLi = ul.querySelector('li');
const newLi = document.createElement('li');
newLi.textContent = '插在第一个 li 前面';
ul.insertBefore(newLi, firstLi); // 插入到第一个 li 之前
常见误区和注意事项
这两个方法都要求操作的是真实 DOM 节点，不能直接传入 HTML 字符串（如 '<li>xxx</li>'），必须先用 createElement 或 innerHTML + firstChild 等方式转成节点。
- 想批量插入多个节点？不能直接传入
document.querySelectorAll结果（它是静态 NodeList）。可用Array.from()转数组后遍历，或用DocumentFragment提高性能 - 插入文本内容时，记得用
document.createTextNode()或直接设置textContent/innerText，避免 XSS 风险 -
appendChild和insertBefore都会返回插入的节点，可用于后续操作，比如立即添加 class 或绑定事件
替代方案：现代写法推荐
虽然 appendChild 和 insertBefore 依然完全可用，但现代开发中更倾向使用以下方式：
-
parent.append(...nodes)：支持多个参数，可插入节点或字符串（字符串自动转为 Text 节点） -
parent.prepend(...nodes)：插到最前面，相当于insertBefore+ 第一个子节点 -
child.before(...nodes)/child.after(...nodes)：在某个已有节点前后插入，更语义化
这些方法兼容性较好（Chrome 54+/Firefox 49+/Edge 17+），如需支持老版本 IE，仍需回退到传统 API。
