appendchild是javascript中向父元素末尾添加子节点的方法，会移动已有节点而非复制；若节点已存在则先移除再插入，支持链式调用且返回被添加节点。
appendChild 是 JavaScript 中向父元素末尾添加一个子节点的最常用方法，它直接修改 DOM，操作简单但需注意节点的“唯一性”和“存在性”。
基本用法：先创建节点，再追加
必须先有要插入的节点（可以是新创建的，也可以是从别处移过来的），再调用父元素的 appendChild() 方法：
- 创建新元素：const newDiv = document.createElement('div');
- 设置内容：newDiv.textContent = '我是新节点';
- 获取父容器：const container = document.getElementById('box');
- 执行插入：container.appendChild(newDiv);
注意：appendChild 会移动已有节点，不是复制
如果传入的节点已经存在于 DOM 中，appendChild 会把它从原位置移走，再插入到新父容器末尾。例如：
- const firstP = document.querySelector('p');
-
document.body.appendChild(firstP); → 这行会让第一个
<p></p>从原来位置消失，出现在最底部
想保留原节点并复制一份，得先用 cloneNode(true) 创建副本再插入。
常见错误与规避方式
以下情况会报错或无效果：
-
父容器不存在：确保 container 是有效元素节点，不是
null或文本节点 - 传入 null 或非 Node 类型：比如 appendChild('hello') 会报错；字符串需先转成节点（如用 innerHTML 或 createTextNode()）
- 多次插入同一节点：第二次调用时因节点已被移走，实际插入的是空操作（不会报错，但没效果）
替代方案：需要插到开头或指定位置？
如果不想插在末尾，可用其他方法：
- 插到开头：parent.insertBefore(newNode, parent.firstChild);
- 插到某个元素前：parent.insertBefore(newNode, referenceElement);
- 用现代语法批量插入（支持多个节点）：parent.append(node1, node2, ...);（注意：append 不仅接受 Node，还支持字符串）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
