appendchild无法一次添加多个节点，推荐用documentfragment批量插入以避免重排；也可用insertadjacenthtml处理html字符串，或现代浏览器中直接用append()传入多个参数。
直接用 appendChild 无法一次添加多个节点——它每次只接受一个 Node 参数。但有几种高效、兼容性好的方式实现“批量添加”，核心思路是：**避免反复重排（reflow）**，把操作集中到文档片段或利用现代 API。
用 DocumentFragment 批量添加（推荐，兼容所有浏览器）
DocumentFragment 是轻量级的“离线容器”，插入它时，内部所有子节点会真实移入目标元素，且只触发一次 DOM 更新，性能好、无闪烁。
做法：
- 创建
document.createDocumentFragment() - 循环创建或获取要添加的节点，逐个调用
fragment.appendChild(node) - 最后对目标容器执行一次
container.appendChild(fragment)
示例：
const container = document.getElementById('list');
const items = ['苹果', '香蕉', '橙子'];
const fragment = document.createDocumentFragment();
items.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
fragment.appendChild(li); // 添加到 fragment，不触发布局
});
container.appendChild(fragment); // 一次性插入全部
用 innerHTML + insertAdjacentHTML（适合纯 HTML 字符串）
如果待添加内容是已知结构的 HTML 字符串（非动态节点对象），用字符串拼接再插入更简洁，且浏览器优化充分。
注意：不要用 innerHTML +=，那会销毁重建已有子节点，导致事件丢失和性能下降。
推荐写法：
- 拼接完整 HTML 字符串
- 用
insertAdjacentHTML('beforeend', htmlStr)追加（等价于 appendChild 效果，但更语义化）
示例：
const container = document.getElementById('list');
const items = ['苹果', '香蕉', '橙子'];
const html = items.map(t => `
用 append() 方法（现代浏览器，支持 IE 以外所有主流浏览器）
Element.append() 是 appendChild 的增强版，**原生支持传入多个参数（Node 或 string）**，一行搞定批量添加，代码最干净。
示例：
const container = document.getElementById('list');
const li1 = document.createElement('li'); li1.textContent = '苹果';
const li2 = document.createElement('li'); li2.textContent = '香蕉';
const li3 = document.createElement('li'); li3.textContent = '橙子';
container.append(li1, li2, li3); // ✅ 一次添加多个节点
⚠️ 注意：IE 完全不支持，如需兼容 IE，必须回退到 DocumentFragment 方案。
不推荐：循环调用 appendChild
虽然语法上可行，但每调用一次 appendChild 都可能触发样式计算与布局（尤其在节点含样式或依赖尺寸时），造成明显卡顿，尤其是添加几十个以上节点时。
反例（避免）：
items.forEach(text => {
const li = document.createElement('li');
li.textContent = text;
container.appendChild(li); // ❌ 每次都操作真实 DOM
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
