JavaScript appendChild() 方法

摘要: 在本教程中，您将学习如何使用 JavaScript appendChild() 方法将节点添加到指定父节点的子节点列表的末尾。

JavaScript appendChild() 方法简介

appendChild() 是 Node 接口的一种方法。appendChild() 方法允许您将节点添加到指定父节点的子节点列表的末尾。

以下是 appendChild() 方法的语法说明

parentNode.appendChild(childNode);Code language: CSS (css)

在此方法中，childNode 是要附加到给定父节点的节点。appendChild() 返回附加的子节点。

如果 childNode 是文档中现有节点的引用，则 appendChild() 方法会将 childNode 从其当前位置移动到新位置。

JavaScript appendChild() 方法示例

让我们看一些使用 appendChild() 方法的示例。

1) 基本的 appendChild() 示例

假设您有以下 HTML 标记

<ul id="menu">
</ul>Code language: HTML, XML (xml)

以下示例使用 appendChild() 方法将三个列表项添加到 <ul> 元素中

function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Code language: JavaScript (javascript)

工作原理

首先，createMenuItem() 函数使用 createElement() 方法创建一个具有指定名称的新列表项元素。
其次，使用 querySelector() 方法选择具有 ID menu 的 <ul> 元素。
第三，调用 createMenuItem() 函数创建一个新的菜单项，并使用 appendChild() 方法将菜单项附加到 <ul> 元素

输出

<ul id="menu">
    <li>Home</li>
    <li>Services</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

将它们整合在一起

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript appendChild() Demo</title>
</head>
<body>
    <ul id="menu">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#menu
        const menu = document.querySelector('#menu');
        // add menu item
        menu.appendChild(createMenuItem('Home'));
        menu.appendChild(createMenuItem('Services'));
        menu.appendChild(createMenuItem('About Us'));
    </script>
</body>
</html>
Code language: HTML, XML (xml)

2) 在文档中移动节点的示例

假设您有两个列表项

<ul id="first-list">
    <li>Everest</li>
    <li>Fuji</li>
    <li>Kilimanjaro</li>
</ul>

<ul id="second-list">
    <li>Karakoram Range</li>
    <li>Denali</li>
    <li>Mont Blanc</li>
</ul>
Code language: HTML, XML (xml)

以下示例使用 appendChild() 将第一个子元素从第一个列表移动到第二个列表

// get the first list
const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Code language: JavaScript (javascript)

工作原理

首先，使用 querySelector() 方法通过其 ID (first-list) 选择第一个元素。
其次，选择第一个列表的第一个子元素。
第三，使用 querySelector() 方法通过其 ID (second-list) 选择第二个元素。
最后，使用 appendChild() 方法将第一个列表的第一个子元素附加到第二个列表。

以下是移动之前和之后列表的显示结果

摘要

使用 appendChild() 方法将节点添加到指定父节点的子节点列表的末尾。
appendChild() 可用于将现有子节点移动到文档中的新位置。

测验

本教程对您有帮助吗？