当前位置：首页 > JavaScript

js实现追加

2026-03-14 15:06:42JavaScript

使用 `innerHTML` 追加内容

通过修改元素的 innerHTML 属性可以直接追加 HTML 内容。

const element = document.getElementById('target');
element.innerHTML += '<p>追加的内容</p>';

注意：此方法会重新解析整个 HTML 结构，可能影响性能或事件绑定。

使用 `insertAdjacentHTML` 追加内容

insertAdjacentHTML 允许在指定位置插入 HTML，性能优于 innerHTML。

js实现追加

const element = document.getElementById('target');
element.insertAdjacentHTML('beforeend', '<p>追加的内容</p>');

可选位置参数：

beforebegin：元素前插入
afterbegin：元素内部开头插入
beforeend：元素内部末尾插入（常用）
afterend：元素后插入

使用 `appendChild` 追加 DOM 节点

适用于动态创建节点并追加到 DOM 中。

js实现追加

const parent = document.getElementById('target');
const newElement = document.createElement('p');
newElement.textContent = '追加的内容';
parent.appendChild(newElement);

使用 `append` 方法（现代浏览器）

append 支持同时追加多个节点或字符串。

const parent = document.getElementById('target');
parent.append('文本内容', document.createElement('span'));

使用 `DocumentFragment` 优化批量追加

通过文档片段减少 DOM 操作次数，提升性能。

const parent = document.getElementById('target');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const p = document.createElement('p');
  p.textContent = `段落 ${i}`;
  fragment.appendChild(p);
}
parent.appendChild(fragment);