当前位置：首页 > JavaScript

js 实现append

2026-04-06 13:49:50JavaScript

实现 append 的方法

在 JavaScript 中，append 通常用于向 DOM 元素添加子节点或内容。以下是几种常见的实现方式：

使用 `appendChild` 方法

appendChild 是 DOM 节点的原生方法，用于将一个节点添加到指定父节点的子节点列表末尾。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'New Content';
parentElement.appendChild(newElement);

使用 `append` 方法

现代浏览器支持 append 方法，可以直接添加多个节点或字符串。

js 实现append

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'New Content';
parentElement.append(newElement, 'Additional Text');

使用 `insertAdjacentHTML` 方法

insertAdjacentHTML 允许在指定位置插入 HTML 字符串，适合动态生成内容。

const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', '<div>New Content</div>');

使用 `innerHTML` 或 `outerHTML`

通过修改 innerHTML 或 outerHTML 属性可以直接插入 HTML 内容。

js 实现append

const parentElement = document.getElementById('parent');
parentElement.innerHTML += '<div>New Content</div>';

使用 jQuery 的 `append` 方法

如果项目中使用了 jQuery，可以直接调用其 append 方法。

$('#parent').append('<div>New Content</div>');

注意事项

appendChild 只能添加节点对象，而 append 可以同时添加节点和字符串。
频繁操作 DOM 可能影响性能，建议批量操作或使用文档片段（DocumentFragment）。
直接修改 innerHTML 会重新解析整个内容，可能导致事件监听丢失。

性能优化建议

对于大量插入操作，可以使用文档片段减少重绘次数。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.getElementById('parent').appendChild(fragment);