appendchild 将节点添加到父元素末尾，仅接受 node 对象；若节点已存在则移动而非复制；不能直接添加字符串，需先转为节点或改用 insertadjacenthtml/append。
appendChild 是 JavaScript 中最常用的 DOM 操作方法之一，用于把一个节点添加到指定父元素的**最后一个子节点位置**（即末尾）。
基本用法：必须先创建或获取节点
不能直接 append 任意值，只能 append 一个有效的 Node 对象（如元素、文本节点等）。常见步骤是：
- 用
document.createElement()创建新元素，或用document.createTextNode()创建文本节点 - 用
querySelector或getElementById等获取目标父容器 - 调用父容器的
appendChild()方法，传入要添加的节点
示例：
const newDiv = document.createElement('div');
newDiv.textContent = '我是新添加的';
const container = document.getElementById('box');
container.appendChild(newDiv);
注意：appendChild 会移动已有节点
如果传入的节点**已经存在于 DOM 中**，它会被自动从原位置移除，再插入到新位置。这不同于克隆，是“剪切粘贴”行为。
例如：
const existingP = document.querySelector('p');
const target = document.getElementById('list');
target.appendChild(existingP); // p 元素从此处消失，出现在 list 末尾
不能直接 append 字符串或 HTML 字符串
以下写法会报错：
container.appendChild('<div>错误！</div>'); // ❌ 类型错误：不是 Node
正确做法是先解析字符串为节点，比如用 innerHTML + firstElementChild，或更安全地用 DOMParser，但最常用的是：
- 创建空元素 → 设置
innerHTML→ 取出子节点逐个 append - 或用
insertAdjacentHTML('beforeend', htmlStr)（不经过节点对象，但效果类似）
替代方案：更灵活的末尾插入方式
如果需要插入 HTML 字符串或避免移动节点，可考虑：
-
parent.insertAdjacentHTML('beforeend', '<span>内容</span>')—— 直接插入 HTML 字符串到末尾 -
parent.append(...nodes)—— 支持多个参数，且能接受字符串（自动转为文本节点）
append() 是现代推荐方式，兼容性稍差（不支持 IE），但更直观、功能更强。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
