最推荐使用DocumentFragment或append()批量插入子节点以提升性能；DocumentFragment兼容性好，适合暂存后一次性插入；append()语法简洁但不支持IE，可传入多个节点或字符串。
JavaScript 中给指定节点追加多个子节点，最推荐的方式是使用 DocumentFragment 或批量调用 append()（现代浏览器支持），避免频繁重排重绘，提升性能。
用 DocumentFragment 批量插入（兼容性好）
DocumentFragment 是一个轻量级的文档对象，不直接渲染到页面，适合暂存多个节点再一次性插入，减少 DOM 操作次数。
- 创建
document.createDocumentFragment() - 把多个新节点（如
document.createElement()创建的元素）依次appendChild()到 fragment 中 - 最后对目标父节点调用
appendChild(fragment)，一次完成插入
示例：
const parent = document.getElementById('container');
const fragment = document.createDocumentFragment();
['苹果', '香蕉', '橙子'].forEach(text => {
const li = document.createElement('li');
li.textContent = text;
fragment.appendChild(li);
});
parent.appendChild(fragment); // 仅一次真实 DOM 插入
用 append() 一次性追加多个节点（简洁，需注意兼容性）
Element.append() 支持传入多个节点或字符串参数，会按顺序插入到末尾，语法更直观。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 可接受任意数量的 Node 对象或 DOMString（字符串会自动转为文本节点）
- 不返回值，且不支持 IE
- 比
appendChild()更灵活（后者一次只能传一个节点）
示例：
const parent = document.getElementById('list');
const item1 = document.createElement('li');
item1.textContent = '第一项';
const item2 = document.createElement('li');
item2.textContent = '第二项';
parent.append(item1, item2, '第三项（字符串）');
避免常见错误：不要用 innerHTML 拼接多个节点（除非内容可信且简单）
虽然 innerHTML += '...' 看似方便，但会导致：
- 已有子节点绑定的事件监听器丢失
- 已存在的表单输入值、滚动位置等状态被重置
- 存在 XSS 风险（若插入内容含用户输入）
仅当插入的是纯静态、无交互、完全可控的 HTML 字符串时才考虑此方式。
补充：如果需要插入到开头，用 prepend()
Element.prepend() 和 append() 行为一致，只是插入位置在子节点最前面，同样支持多个参数，IE 同样不支持。
parent.prepend(newNode1, newNode2);
