JavaScript append() 方法
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.append() 方法。此方法对于 DOM 操作至关重要，它允许开发人员将节点或字符串添加到父元素的子元素的末尾。
基本定义
append() 方法在父元素的最后一个子元素之后插入一组 Node 对象或字符串。与 appendChild() 不同，它可以接受多个参数和字符串值。
该方法直接修改 DOM 并返回 undefined。它在所有现代浏览器中都受支持，但在 Internet Explorer 中不受支持。字符串会自动插入为 Text 节点。
基本的 append() 用法
此示例演示了如何将一个简单元素追加到容器中。
<!DOCTYPE html>
<html>
<head>
<title>Basic append()</title>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Appended element';
container.append(newDiv);
</script>
</body>
</html>
在这个基本示例中，我们创建一个 div 元素并将其追加到容器中。append() 方法将新 div 添加为容器的最后一个子元素。
这演示了 append() 向 DOM 添加元素的基本用法。对于简单的情况，该方法比 appendChild() 更简洁，并且对于元素节点的工作方式相似。
追加多个元素
此示例展示了如何一次使用 append() 追加多个元素。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<ul id="list"></ul>
<script>
const list = document.getElementById('list');
const item1 = document.createElement('li');
const item2 = document.createElement('li');
item1.textContent = 'First item';
item2.textContent = 'Second item';
list.append(item1, item2);
</script>
</body>
</html>
在这里，我们在一个操作中创建了两个列表项并将它们追加到无序列表中。append() 方法接受多个参数。
这展示了 append() 在添加多个元素时相对于 appendChild() 的优势。它减少了所需的 DOM 操作次数。
追加字符串和元素
此示例演示了 append() 如何处理字符串和元素。
<!DOCTYPE html>
<html>
<head>
<title>Mixed Content</title>
</head>
<body>
<div id="content"></div>
<script>
const content = document.getElementById('content');
const span = document.createElement('span');
span.textContent = 'span element';
content.append('Text before ', span, ' and text after');
</script>
</body>
</html>
在此示例中，我们将字符串文本和元素节点混合追加到一个 div 中。字符串会自动转换为文本节点。
这展示了 append() 在处理不同类型内容时的灵活性。该方法在生成的 DOM 中保持参数的顺序。
使用模板字面量追加
此示例展示了如何将 append() 与模板字面量结合使用以实现动态内容。
<!DOCTYPE html>
<html>
<head>
<title>Template Literals</title>
</head>
<body>
<div id="output"></div>
<button onclick="addMessage()">Add Message</button>
<script>
function addMessage() {
const output = document.getElementById('output');
const username = 'John';
const count = 3;
output.append(`Hello ${username}! You have ${count} new messages.`);
}
</script>
</body>
</html>
在这里，我们使用带有变量的模板字面量来创建动态内容，该内容在单击按钮时被追加。字符串会自动转换。
这演示了 append() 如何与动态内容生成协同工作。模板字面量为创建复杂字符串提供了一种简洁的方式。
追加到文档片段
此示例演示了将 append() 与文档片段结合使用以提高性能。
<!DOCTYPE html>
<html>
<head>
<title>Document Fragment</title>
</head>
<body>
<div id="results"></div>
<script>
const fragment = document.createDocumentFragment();
const results = document.getElementById('results');
for (let i = 0; i < 5; i++) {
const item = document.createElement('div');
item.textContent = `Item ${i + 1}`;
fragment.append(item);
}
results.append(fragment);
</script>
</body>
</html>
在这里，我们在文档片段中创建多个元素，然后再将它们追加到 DOM。这可以最大限度地减少重排并提高性能。
这展示了 append() 与文档片段的高级用法。在将多个元素高效地添加到 DOM 时，片段非常有用。
来源
在本文中，我们展示了如何在 JavaScript 中使用 append() 方法。此方法是现代 Web 开发中 DOM 操作和元素添加的基础。
作者
列出 所有 JS DOM 教程。