当前位置：首页 > JavaScript

js 实现append

2026-03-14 20:05:50JavaScript

在 JavaScript 中实现 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() 是较新的方法，允许一次添加多个节点或字符串。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'New content';
parentElement.append(newElement, 'Some text', document.createElement('span'));

使用 insertAdjacentHTML()

insertAdjacentHTML() 可以解析字符串为 HTML 并插入到指定位置。

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

使用 innerHTML

通过修改 innerHTML 属性可以添加 HTML 内容。

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

使用 insertBefore()

虽然主要用于在特定位置插入节点，但结合 lastChild 可以实现类似 append 的功能。

js 实现append

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'New content';
parentElement.insertBefore(newElement, parentElement.lastChild.nextSibling);

注意事项

append() 与 appendChild() 的区别：append() 可以添加多个节点和文本节点，而 appendChild() 只能添加一个节点
innerHTML 会重新解析整个内容，可能影响性能
现代浏览器都支持这些方法，但 append() 在非常旧的浏览器中可能不被支持