js实现append

使用 DOM 方法实现 append

在 JavaScript 中，可以通过 DOM 操作方法向元素追加内容。append() 方法允许插入节点或字符串到指定元素的末尾。

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

使用字符串插入 HTML

如果需要直接插入 HTML 字符串，可以使用 insertAdjacentHTML 方法，通过指定位置为 'beforeend' 实现追加效果。

document.getElementById('parent').insertAdjacentHTML('beforeend', '<div>新追加的HTML内容</div>');

使用 jQuery 的 append 方法

如果项目中已引入 jQuery，可以使用其简化的 append() 方法，支持直接传入 HTML 字符串或 DOM 元素。

$('#parent').append('<div>通过jQuery追加的内容</div>');

性能优化建议

对于批量追加多个元素，建议使用 DocumentFragment 减少重排次数。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const item = document.createElement('li');
  item.textContent = `项目 ${i}`;
  fragment.appendChild(item);
}
document.getElementById('list').append(fragment);

注意事项

现代浏览器普遍支持原生 append() 方法，但如需兼容旧版 IE，需使用 appendChild() 替代。两者区别在于 append() 支持插入多个参数和字符串，而 appendChild() 仅接受单个节点对象。