当前位置：首页 > JavaScript

js 实现append()

2026-01-31 16:17:36JavaScript

实现 append() 方法

在 JavaScript 中，可以通过多种方式实现类似 append() 的功能，用于向 DOM 元素添加子节点或内容。以下是几种常见方法：

使用 appendChild() 方法

appendChild() 是原生 DOM 方法，用于向指定父节点添加子节点：

const parent = document.getElementById('parent');
const child = document.createElement('div');
child.textContent = 'New child';
parent.appendChild(child);

使用 insertAdjacentHTML() 方法

insertAdjacentHTML() 可以在指定位置插入 HTML 字符串：

js 实现append()

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

使用 innerHTML 属性

通过修改 innerHTML 可以添加 HTML 内容：

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

使用现代 append() 方法

js 实现append()

现代浏览器支持 append() 方法，可以一次添加多个节点或字符串：

const parent = document.getElementById('parent');
const child1 = document.createElement('div');
child1.textContent = 'Child 1';
const child2 = 'Child 2 text';
parent.append(child1, child2);

自定义 append() 函数

如果需要创建一个自定义的 append() 函数来统一不同方法的调用方式：

function append(parent, ...children) {
  if (typeof parent.append === 'function') {
    parent.append(...children);
  } else {
    children.forEach(child => {
      if (typeof child === 'string') {
        parent.insertAdjacentHTML('beforeend', child);
      } else {
        parent.appendChild(child);
      }
    });
  }
}

性能考虑

当需要频繁操作 DOM 时，使用 DocumentFragment 可以提高性能：

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('container').appendChild(fragment);