append()和prepend()是原生JavaScript DOM方法，支持一次插入多个字符串、元素或DocumentFragment，且字符串不解析HTML；二者均不兼容IE。
JavaScript 中的 append() 和 prepend() 方法原生就支持一次插入多个内容，无需循环或多次调用，这是它们比旧式 appendChild() 更简洁的关键优势。
append() 一次追加多个内容
调用 append() 时，可以传入任意数量的参数，类型可以是：
- 字符串（自动转为文本节点，不解析 HTML）
- DOM 元素节点（如
document.createElement('p')） - DocumentFragment（适合批量插入，性能更好）
- 多个混合类型混用
示例：
const container = document.getElementById('list');const newItem = document.createElement('li');
newItem.textContent = '新项';
container.append('纯文本', newItem, document.createTextNode('另一段文本'));
执行后，三者会按顺序追加到 container 的末尾子节点位置。
立即学习“Java免费学习笔记（深入）”；
prepend() 一次前置多个内容
prepend() 行为与 append() 对称，只是插入位置在子节点最前面。同样接受多参数、多类型：
- 传入顺序即显示顺序：第一个参数变成最靠前的子节点
- 若传入已存在的 DOM 节点，它会被从原位置移走，再插入到新位置（移动，非复制）
示例：
const ul = document.querySelector('ul');const firstLi = document.createElement('li');
firstLi.textContent = '顶部项';
ul.prepend(firstLi, '开头说明', document.createElement('hr'));
结果：<hr>、文本、“顶部项” 会从左到右依次出现在 <ul></ul> 最开始的位置（注意视觉顺序与参数顺序一致）。
注意事项：字符串不会被解析为 HTML
如果想插入带标签的 HTML 片段（比如 '<strong>加粗</strong>'），append() 和 prepend() 会把它当纯文本处理，直接显示为字面量。需要解析 HTML，应改用：
-
insertAdjacentHTML('beforeend', htmlString)（追加 HTML） -
insertAdjacentHTML('afterbegin', htmlString)（前置 HTML）
例如：container.insertAdjacentHTML('beforeend', '<p><em>动态段落</em></p>');
兼容性提醒
append() 和 prepend() 不支持 IE 浏览器，现代浏览器（Chrome 54+、Firefox 49+、Edge 17+、Safari 10+）均可用。如需兼容老版本 IE，需用 appendChild() + 循环，或借助 insertBefore() 封装 prepend 功能。
