js实现append

使用 appendChild 方法

appendChild 是 DOM 操作中常用的方法，用于将节点添加到指定父节点的子节点列表末尾。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '新内容';
parentElement.appendChild(newElement);

使用 insertAdjacentHTML 方法

insertAdjacentHTML 允许在指定位置插入 HTML 字符串，支持多种插入位置（如 beforeend 表示在元素内部末尾）。

const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', '<div>新内容</div>');

使用 innerHTML 或 outerHTML

直接修改 innerHTML 可以追加内容，但会替换原有内容，需谨慎使用。

const parentElement = document.getElementById('parent');
parentElement.innerHTML += '<div>新内容</div>';

使用现代 append 方法（ES6+）

append 方法支持同时插入多个节点或字符串，无需创建临时元素。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '新内容';
parentElement.append(newElement, '追加文本');

使用 jQuery 的 append

如果项目中已引入 jQuery，可以使用其简化的 append 方法。

$('#parent').append('<div>新内容</div>');

注意事项

• appendChild 只能插入节点对象，而 append 支持混合插入文本和节点。
• 直接操作 innerHTML 可能导致 XSS 风险，需对动态内容转义。
• 频繁 DOM 操作建议使用文档片段（DocumentFragment）优化性能。