JavaScript appendChild 详解：如何安全地添加 DOM 元素（附示例）

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍

为什么要学习 JavaScript 中的 DOM 操作？

JavaScript 是在网页上创建交互行为的主要编程语言。在 Web 开发中，你经常需要动态地添加或删除元素。要实现这些操作，就必须掌握并正确操作 DOM（文档对象模型） 的技能。

DOM 将 HTML 或 XML 文档表示为树状结构，JavaScript 让你能够改变页面的内容和结构。这使得可以根据用户操作动态生成内容，并实时更新用户在屏幕上看到的内容。

本文聚焦于 appendChild 方法，它虽基础却使用频繁，我们将以通俗易懂的方式，从具体用法到实战示例全部讲解清楚。

什么是 appendChild？概述与使用场景

appendChild 是 JavaScript 的 DOM 操作方法之一。它用于向指定元素添加一个新的子元素。

使用该方法，你可以轻松实现以下操作：

• 创建一个新元素并将其加入页面。
• 动态增加表单字段或列表项。
• 在按钮点击时插入内容。

例如，下面的代码创建了一个新的 div 元素并将其追加到父元素中：

var parentElement = document.getElementById('container');

var newElement = document.createElement('div');
newElement.textContent = 'New element';

parentElement.appendChild(newElement);

正如你所见，appendChild 看似简单，却提供了非常强大的功能。

本文你将学到的内容

在本文中，我们将详细说明以下内容：

1. appendChild 的基本语法与用法
2. 实战示例（添加列表项、表单字段等）
3. 与其他方法（insertBefore、append）的对比
4. 提升性能的关键注意事项与技巧
5. 常见问题及解决方案

阅读本指南后，你将对 JavaScript 的 DOM 操作有扎实的理解，并掌握在实际 Web 开发中非常有用的技能。

2. appendChild 基础及使用方法

appendChild 语法与作用

appendChild 是用于向指定父元素添加新子元素的方法。它将在 DOM 树中把节点插入到父节点的末尾位置。

基本语法

parentElement.appendChild(childElement);

• parentElement：将要添加子元素的父元素。
• childElement：要添加到父元素的子元素。

使用上述语法，你可以向 DOM 树中的任意元素添加新节点。

appendChild 的基本用法

1. 创建新元素并追加

下面示例演示如何使用 appendChild 添加一个新的 div 元素。

var parentElement = document.getElementById('container');

var newElement = document.createElement('div');
newElement.textContent = 'New element';

parentElement.appendChild(newElement);

代码拆解

1. 获取父元素：使用 document.getElementById('container') 获取 HTML 中的特定元素。
2. 创建新元素：使用 document.createElement('div') 生成一个新的 div 元素。
3. 设置文本：通过 textContent 向元素中插入字符串。
4. 追加到父元素：使用 appendChild 将子元素添加到父元素的末尾。

添加元素的逐步说明

1. HTML 代码

<div id="container"></div>

2. JavaScript 代码

var container = document.getElementById('container');
var newDiv = document.createElement('div');
newDiv.textContent = 'Dynamically added element';
container.appendChild(newDiv);

3. 结果

运行上述代码后，HTML 结构将变为：

<div id="container">
  <div>Dynamically added element</div>
</div>

这使得在网页上动态添加元素变得非常简便。

移动已有元素时的注意事项

appendChild 不仅可以用于新元素，还可以用于重新定位现有元素。但是，请注意，该元素会从其原始位置移动，如以下所示。

示例：移动元素

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Move child from parent1 to parent2
parent2.appendChild(child);

在该代码中，child 元素从原始父元素移动到新父元素。由于同一元素不能多次追加，请记住 appendChild 的行为类似于“移动”操作。

示例：添加文本节点

您还可以动态添加文本节点，而不仅仅是 HTML 元素。

代码示例

var parent = document.getElementById('container');
var textNode = document.createTextNode('A text node has been added');
parent.appendChild(textNode);

结果

<div id="container">A text node has been added</div>

这种方法在您只想添加纯文本时非常有用。

3. 实际示例

动态添加列表项

在 Web 应用程序中，您经常需要根据用户输入或外部数据动态添加列表项。以下是使用 appendChild 添加列表项的示例。

代码示例

<ul id="list"></ul>
<button id="addItem">Add item</button>

var list = document.getElementById('list');
var button = document.getElementById('addItem');

// Add a list item on button click
button.addEventListener('click', function () {
    // Create a new list item
    var newItem = document.createElement('li');
    newItem.textContent = 'New item';

    // Append to the list
    list.appendChild(newItem);
});

说明

1. 获取父元素： 使用 document.getElementById('list') 获取 ul 元素。
2. 设置事件监听器： 当按钮被点击时运行该过程。
3. 创建新项： 使用 document.createElement('li') 动态生成 li 元素。
4. 追加项： 使用 appendChild 将项添加到列表末尾。

结果

每次点击按钮时，都会添加一个新的列表项。

使用按钮生成表单字段

如果您想通过用户操作动态添加表单字段，appendChild 也很方便。

代码示例

<div id="formContainer"></div>
<button id="addField">Add field</button>

var container = document.getElementById('formContainer');
var button = document.getElementById('addField');

// Add a form field on button click
button.addEventListener('click', function () {
    var inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.placeholder = 'New field';
    container.appendChild(inputField);
});

说明

1. 获取表单容器： 指定将添加字段的父元素。
2. 创建新字段： 使用 document.createElement('input') 生成输入字段。
3. 设置属性： 动态设置 type 和 placeholder 等属性。
4. 追加到表单： 每次按下按钮时添加一个字段。

结果

点击按钮时，会逐个添加新的输入字段。

示例：动态添加图像

一个常见场景是动态向网页添加图像。

代码示例

<div id="imageContainer"></div>
<button id="addImage">Add image</button>

var container = document.getElementById('imageContainer');
var button = document.getElementById('addImage');

// Add an image on button click
button.addEventListener('click', function () {
    var img = document.createElement('img');
    img.src = 'example.jpg';
    img.alt = 'Dynamically added image';
    img.width = 200;
    container.appendChild(img);
});

说明

1. Get the parent element: Get the container element where the image will be added.
2. Create the image element: Use document.createElement('img') to dynamically generate an image element.
3. Set attributes: Specify attributes like src and alt .
4. Append the image: Add images sequentially via click actions.

Result

When you click the button, the specified image is added to the page.

Example: Appending Multiple Elements at Once

When you want to append multiple elements at once, using a DocumentFragment is efficient.

Code Example

<div id="multiContainer"></div>
<button id="addMultiple">Add multiple</button>

var container = document.getElementById('multiContainer');
var button = document.getElementById('addMultiple');

// Add multiple elements on button click
button.addEventListener('click', function () {
    var fragment = document.createDocumentFragment();

    for (var i = 1; i <= 5; i++) {
        var newDiv = document.createElement('div');
        newDiv.textContent = 'Item ' + i;
        fragment.appendChild(newDiv);
    }

    container.appendChild(fragment);
});

Explanation

1. Create a DocumentFragment: Create a temporary container in memory.
2. Append elements in a loop: Add new elements to the DocumentFragment one by one.
3. Append in one operation: Finally append all at once to the parent element, improving performance.

Result

When clicked, five items are added at the same time.

4. Comparing appendChild with Other Methods

appendChild vs insertBefore

Overview

appendChild appends an element to the end of the parent node, while insertBefore inserts it before a specified node.

Basic Syntax

parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);

Example

<div id="container">
  <p id="first">First element</p>
</div>

Using appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

Result:

<div id="container">
  <p id="first">First element</p>
  <p>Appended element</p>
</div>

Using insertBefore

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Inserted element';
var firstElement = document.getElementById('first');
parent.insertBefore(newElement, firstElement);

Result:

<div id="container">
  <p>Inserted element</p>
  <p id="first">First element</p>
</div>

Key Differences

• appendChild: Appends an element to the end of the parent element.
• insertBefore: Inserts an element before a specific element, allowing more flexible placement.

appendChild vs append

Overview

The append method is similar to appendChild, but it was introduced in a relatively newer JavaScript specification.

Basic Syntax

parentElement.appendChild(newElement); // Only nodes can be appended
parentElement.append('Text', newElement); // Text can also be appended

Example

Using appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

Result:

<div id="container">
  <p>Appended element</p>
</div>

Using append

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.append('Text', newElement);

Result:

<div id="container">
  Text
  <p>Appended element</p>
</div>

Key Differences

• appendChild: 只能追加节点，不能直接追加文本。
• append: 可以在一次操作中同时追加节点和文本，因而更灵活。
• 兼容性: 由于 append 较新，旧版浏览器可能不支持它。

appendChild 与 innerHTML 对比

概述

innerHTML 将 HTML 结构视为字符串，而 appendChild 将元素视为节点。

示例

使用 appendChild

var parent = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement);

使用 innerHTML

var parent = document.getElementById('container');
parent.innerHTML += '<p>Appended element</p>';

关键区别

• appendChild:
• 将元素视为节点，使操作更安全。
• 在追加元素时能够保留事件监听器。
• innerHTML:
• 因为将 HTML 当作字符串处理而使用简便，但也会因语法错误而增加出错风险。
• 现有的子元素和事件监听器可能会丢失，需要谨慎。

如何选择及建议

5. 注意事项与最佳实践

1. 重新定位节点时请小心

需要注意的点

当使用 appendChild 将已有元素添加到其他位置时，该元素会 从原位置移动，而不是复制后放置在多个位置。

示例

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Append child to parent2 (move)
parent2.appendChild(child);

结果

在此代码中，child 从 parent1 被移除并移动到 parent2。如果想多次追加相同内容，需要创建新的元素。

解决方案

如果想复制元素，请使用 cloneNode() 方法。

var clone = child.cloneNode(true); // true copies child nodes as well
parent2.appendChild(clone);

2. 性能考虑

需要注意的点

如果在循环中反复调用 appendChild 追加大量元素，会增加 DOM 操作次数，可能影响性能。

解决方案

使用 DocumentFragment 在内存中的虚拟容器里构建元素，然后一次性全部追加。

示例

var parent = document.getElementById('container');
var fragment = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {
    var div = document.createElement('div');
    div.textContent = 'Item ' + (i + 1);
    fragment.appendChild(div);
}

// Append to the parent at once
parent.appendChild(fragment);

好处

• 减少 DOM 访问次数，提升性能。
• 有助于防止渲染时出现可见的闪烁。

3. 何时使用 innerHTML 与 appendChild

需要注意的点

innerHTML 简洁，但存在以下缺点：

• 更容易出现 HTML 语法错误。
• 可能导致现有元素和事件监听器丢失。

解决方案

在追加或操作元素时，使用 appendChild 更安全。

示例：常见的 innerHTML 陷阱

var parent = document.getElementById('container');
parent.innerHTML = '<p>Appended element</p>'; // All existing elements are removed

推荐：使用 appendChild

var newElement = document.createElement('p');
newElement.textContent = 'Appended element';
parent.appendChild(newElement); // Safely appended

4. 保持事件监听器

需要注意的点

使用 appendChild 移动元素时，事件监听器会保持不变。但若使用 innerHTML，事件监听器会被移除。

解决方案

在动态操作元素时，需要注意事件的注册方式。

示例：保持事件监听器

var button = document.createElement('button');
button.textContent = 'Click';
button.addEventListener('click', function () {
    alert('Clicked!');
});

// Append with appendChild
document.body.appendChild(button); // The event listener is preserved

使用 innerHTML 时

document.body.innerHTML += '<button>Click</button>'; // The event listener is lost

5. 可访问性和安全性考虑

需要注意的事项

1. 可访问性： 动态追加元素时，通过使用 ARIA 属性 加强屏幕阅读器的支持。
2. 安全性： 使用 innerHTML 可能增加 XSS（跨站脚本）风险。尽可能使用 appendChild。

解决方案

示例：添加 ARIA 属性

var button = document.createElement('button');
button.textContent = 'Submit';
button.setAttribute('aria-label', 'Submit button');
document.body.appendChild(button);

6. 常见问题解答 (FAQ)

问题 1：我可以一次使用 appendChild 追加多个元素吗？

回答

不可以。appendChild 一次只能追加一个节点。如果想一次追加多个元素，请使用 DocumentFragment 或 append 方法。

解决方案 1：使用 DocumentFragment

var parent = document.getElementById('container');
var fragment = document.createDocumentFragment();

for (var i = 0; i < 5; i++) {
    var div = document.createElement('div');
    div.textContent = 'Item ' + (i + 1);
    fragment.appendChild(div);
}

// Append in one operation
parent.appendChild(fragment);

解决方案 2：使用 append（现代规范）

var parent = document.getElementById('container');
parent.append('Text', document.createElement('div'));

问题 2：如何仅使用 appendChild 追加文本？

回答

要仅追加文本，需要创建并追加一个 文本节点。

代码示例

var parent = document.getElementById('container');
var textNode = document.createTextNode('Appended text');
parent.appendChild(textNode);

关键点

使用 createTextNode 可以安全地插入不含 HTML 标签的纯文本。

问题 3：导致 appendChild 错误的原因是什么，如何修复？

回答

常见原因通常归为以下三类。

1. 父元素或子元素为 null

错误示例：

var parent = document.getElementById('container'); // Element does not exist
parent.appendChild(newElement); // Error occurs

解决方案：
在操作前检查元素是否存在。

var parent = document.getElementById('container');
if (parent) {
    parent.appendChild(newElement);
}

2. 子元素已被追加过

错误示例：

parent.appendChild(child); // First append succeeds
parent.appendChild(child); // Second append causes an error

解决方案：
如果需要复用相同内容，请使用 cloneNode()。

var clone = child.cloneNode(true);
parent.appendChild(clone);

3. 尝试追加无效的节点类型

错误示例：

parent.appendChild('Text'); // Error

解决方案：
追加文本时请创建文本节点。

var textNode = document.createTextNode('Text');
parent.appendChild(textNode);

问题 4：我应该使用 appendChild 还是 innerHTML？

回答

如果你更注重安全性，请使用 appendChild。
innerHTML 使用方便，因为它以字符串形式插入 HTML，但存在以下缺点：

1. 安全风险（可能的 XSS 攻击）
2. 可能导致现有元素和事件监听器丢失

推荐示例

var parent = document.getElementById('container');
var newElement = document.createElement('div');
newElement.textContent = 'Safely appended';
parent.appendChild(newElement);

另一方面，如果只需要插入简短的静态内容，innerHTML 仍然很方便。

问题 5：appendChild 在所有浏览器中都可用吗？

回答

是的。appendChild 被 几乎所有浏览器 支持，包括旧版浏览器。

然而，append 方法（提供类似功能）在旧版浏览器中可能不被支持。如果兼容性很重要，appendChild 是更安全的选择。

Q6：如果我在已有元素上使用 appendChild，原始元素会怎样？

Answer

因为 appendChild 执行的是 移动 操作，元素会从原来的位置被移除。

Example

var parent1 = document.getElementById('parent1');
var parent2 = document.getElementById('parent2');
var child = document.getElementById('child');

// Move
parent2.appendChild(child);

child 被从 parent1 移除并追加到新的 parent2。

Solution:
如果你想在原位置保留一份副本，请使用 cloneNode()。

var clone = child.cloneNode(true);
parent2.appendChild(clone);

7. Conclusion

为什么 JavaScript 的 appendChild 方法很重要

在本文中，我们详细介绍了 JavaScript 的 appendChild 方法，从基本用法到实际示例、与其他方法的比较以及常见问题解答。

appendChild 是网页开发中进行 DOM 操作的基础方法。它在动态添加元素和实现用户交互方面发挥着关键作用。凭借其简洁的语法和广泛的兼容性，几乎所有人——从初学者到专业开发者——都在使用它。

关键要点快速回顾

1. 基础及工作原理

• 用于向父元素追加一个新的子元素。
• 与 createElement 和 createTextNode 结合使用，可动态追加元素和文本节点。

2. 实际使用场景

• 我们展示了在列表项、表单字段、图片以及一次性追加多个元素等真实情境中的用法。
• 为了高效追加大量元素，使用 DocumentFragment 可以优化性能。

3. 与其他方法的比较

• insertBefore： 可灵活地在指定位置插入。
• append： 能同时追加文本和元素（属于较新的规范）。
• innerHTML： 使用简便，但在安全性和保留事件监听器方面存在缺点。

4. 最佳实践

• 重新定位节点时要小心。如果需要保留副本，请使用 cloneNode。
• 使用 DocumentFragment 提升性能。
• 在考虑安全性和可访问性的同时，保持正确的 HTML 结构。

5. FAQ 部分

• 我们为常见的初学者问题提供了解答，如常见错误、一次性追加多个元素以及安全地插入文本等。

后续步骤

在真实项目中尝试使用

利用本文中的代码示例，尝试实现动态追加元素的功能。将其应用到按钮和表单交互中，你可以为交互式 Web 应用奠定坚实的基础。

更多可探索的主题

如果你想进一步学习高级的 DOM 操作和事件管理，以下主题也值得一看：

• 事件监听器与事件处理：为用户操作添加响应。
• 类和 ID 的使用：通过 classList 和 setAttribute 管理属性。
• 使用 template 元素：动态插入预定义的模板。

结束语

JavaScript 的 appendChild 方法是动态操作网页的最基础且最重要的工具之一。请把本文作为参考，运用到自己的项目中。

如果你觉得本文对你有帮助，欢迎在社交媒体上分享或在评论区留下反馈。持续提升你的 JavaScript 技能，迎接更高级的开发挑战！