JavaScript 中 append 和 appendChild 的区别

原创于 2025-04-03 12:06:16 发布 · 706 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #html

前端知识专栏收录该内容

9 篇文章

订阅专栏

在 JavaScript 里，append 和 appendChild 都能够往一个父元素里添加子元素，不过它们存在一些显著差异。下面我们会详细探讨这些差异，并给出示例代码。

1. 参数类型

appendChild：此方法仅接受一个 Node 类型的参数，也就是说，你只能传入一个 DOM 节点。
append：这个方法可以接受 Node 类型的参数，也能接受字符串类型的参数。你既可以添加 DOM 节点，也能添加纯文本。

2. 返回值

appendChild：会返回被添加的子节点。
append：没有返回值（返回 undefined）。

3. 一次添加多个元素

appendChild：一次只能添加一个子节点。若要添加多个节点，就得多次调用该方法。
append：能够一次添加多个节点或者字符串。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>append vs appendChild</title>
</head>

<body>
    <div id="parent"></div>

    <script>
        // 获取父元素
        const parent = document.getElementById('parent');

        // 创建一个新的段落元素
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'This is a new paragraph.';

        // 使用 appendChild 添加元素
        const returnedNode = parent.appendChild(newParagraph);
        console.log('appendChild 返回值:', returnedNode);

        // 创建另一个新的段落元素
        const anotherParagraph = document.createElement('p');
        anotherParagraph.textContent = 'This is another paragraph.';

        // 使用 append 添加元素和文本
        parent.append(anotherParagraph, ' This is some text.');
        console.log('append 返回值:', parent.append(anotherParagraph, ' This is some text.')); // 输出 undefined
    </script>
</body>

</html>

代码解释：

appendChild：
- 先创建一个新的 <p> 元素，接着使用 appendChild 把它添加到父元素中。
- appendChild 方法返回被添加的 <p> 元素，这个返回值会被记录在 returnedNode 变量里。
append：
- 又创建了一个新的 <p> 元素。
- 运用 append 方法把这个新的 <p> 元素和一段纯文本添加到父元素中。
- append 方法没有返回值，所以 console.log 输出 undefined。