JavaScript appendChild
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 appendChild 方法。此方法对于 DOM 操作至关重要，它允许开发人员动态地将新元素添加到文档结构中。
基本定义
appendChild 方法将一个节点添加到指定父节点子节点列表的末尾。如果该节点已存在于文档中，它将被移动到新位置。
此方法通常用于动态创建和添加元素到 DOM。它会返回被添加的子节点，这对于链式操作很有用。
基本的 appendChild 示例
此示例演示了如何创建一个新元素并将其添加到 body。
<!DOCTYPE html>
<html>
<head>
<title>Basic appendChild</title>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById('container');
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph!';
container.appendChild(newParagraph);
</script>
</body>
</html>
在这个基本示例中，我们首先获取对容器 div 的引用。然后我们创建一个新的段落元素并设置其文本内容。最后，我们将新段落附加到容器。
这演示了 appendChild 将新元素添加到 DOM 的基本用法。该方法将新元素添加为父元素的最后一个子元素。
追加多个元素
此示例展示了如何将多个元素附加到父节点。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<ul id="shopping-list"></ul>
<script>
const list = document.getElementById('shopping-list');
const items = ['Apples', 'Bananas', 'Milk', 'Bread'];
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
});
</script>
</body>
</html>
在这里，我们通过动态地将列表项添加到无序列表中来创建一个购物列表。我们使用 forEach 遍历项目数组。
对于每个项目，我们创建一个新的 li 元素，设置其文本内容，然后将其附加到列表中。在渲染动态列表时，这种模式很常见。
移动现有元素
此示例演示了 appendChild 如何移动现有元素。
<!DOCTYPE html>
<html>
<head>
<title>Moving Elements</title>
</head>
<body>
<div id="source">
<p id="movable">This element will be moved</p>
</div>
<div id="destination"></div>
<button onclick="moveElement()">Move Element</button>
<script>
function moveElement() {
const movable = document.getElementById('movable');
const destination = document.getElementById('destination');
destination.appendChild(movable);
}
</script>
</body>
</html>
在这个示例中，我们在一个源 div 中有一个段落。当按钮被点击时，该段落将使用 appendChild 移动到目标 div。
这表明 appendChild 不仅仅添加新元素，还可以重新定位 DOM 中的现有元素。原始元素在附加到新父元素之前会从其当前位置移除。
附加复杂结构
此示例展示了如何构建和附加更复杂的 DOM 结构。
<!DOCTYPE html>
<html>
<head>
<title>Complex Structures</title>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
const card = document.createElement('div');
card.className = 'card';
const title = document.createElement('h2');
title.textContent = 'Product Card';
const description = document.createElement('p');
description.textContent = 'This is a product description.';
const button = document.createElement('button');
button.textContent = 'Add to Cart';
card.appendChild(title);
card.appendChild(description);
card.appendChild(button);
app.appendChild(card);
</script>
</body>
</html>
在这里，我们创建了一个带有多个嵌套元素的 product card 组件。我们首先创建 card 容器，然后是它的子元素，最后将它们组装起来。
这表明 appendChild 可用于以编程方式构建复杂的 UI 组件。每个元素在附加到其父元素之前都会被创建和配置。
附加 Document Fragments
此示例演示了使用 DocumentFragment 和 appendChild 以提高性能。
<!DOCTYPE html>
<html>
<head>
<title>Document Fragments</title>
</head>
<body>
<div id="calendar"></div>
<script>
const calendar = document.getElementById('calendar');
const fragment = document.createDocumentFragment();
for (let i = 1; i <= 7; i++) {
const day = document.createElement('div');
day.className = 'day';
day.textContent = `Day ${i}`;
fragment.appendChild(day);
}
calendar.appendChild(fragment);
</script>
</body>
</html>
在这个示例中，我们通过首先在 DocumentFragment 中构建结构来创建一个周历。该片段充当 DOM 节点的轻量级容器。
当附加多个元素时，使用 DocumentFragment 更有效，因为它最大限度地减少了重排和重绘。当附加片段时，所有元素都作为一个操作添加到 DOM 中。
来源
在本文中，我们展示了如何在 JavaScript 中使用 appendChild。此方法对于 Web 开发中的动态 DOM 操作和元素创建至关重要。
作者
列出 所有 JS DOM 教程。