DOM节点插入位置取决于方法及参数：append()和prepend()分别在末尾和开头插入，支持多节点和字符串；appendChild()仅支持单节点末尾插入；insertBefore()可精确插到指定节点前；insertAfter()需用insertBefore+nextSibling模拟。
DOM 节点插入位置不是“随便放”，而是取决于你用哪个方法、传什么参数。核心就两条逻辑：要么插到末尾，要么插到某个现有节点之前；没有原生的“插到后面”方法，但可以轻松模拟。
append()：末尾追加，支持多个和字符串
这是现代推荐的末尾插入方式，比 appendChild 更灵活：
- 可一次插入多个节点，或混入字符串（自动转为文本节点）
- 不返回插入的节点，但语义更清晰
- 如果插入的是已存在的节点，会从原位置移走再插入
示例：parent.append(newDiv, anotherDiv, "纯文本")
appendChild()：最基础的末尾插入
老标准，兼容性最好，但功能单一：
立即学习“Java免费学习笔记（深入）”；
- 每次只能插入一个节点
- 插入已有节点时，等效于“移动”而非复制
- 返回被插入的节点，方便链式调用或确认
示例：parent.appendChild(newDiv)
insertBefore()：精确插到某节点之前
唯一原生支持“中间插入”的方法，必须指定参考节点：
- 第二个参数不能省略；传
null等价于 appendChild - 参考节点必须是父元素的直接子节点
- 常用于动态排序、条件插入（比如插在第一个
<li>前）
示例：parent.insertBefore(newDiv, parent.children[1])
prepend()：开头插入，现代且简洁
相当于“反向的 append”，把节点加到子节点列表最前面：
- 同样支持多节点和字符串
- 无需手动找第一个子节点，也不用封装 insertBefore
- 插入已有节点时也触发移动行为
示例：parent.prepend(newDiv)
模拟 insertAfter()：用 insertBefore + nextSibling
虽然 DOM 没有原生 insertAfter，但一行就能实现：
- 利用
referenceNode.nextSibling作为插入点 - 如果 referenceNode 是最后一个子节点，nextSibling 为 null，此时插入效果等同于 append
- 封装成函数后使用更直观：
insertAfter(newDiv, target)
底层写法：parent.insertBefore(newDiv, target.nextSibling)
