在本教程中，您将学习如何使用 JavaScript appendChild 方法将元素追加到指定父节点的子节点末尾。

JavaScript appendChild 方法简介

appendChild 是 Node 的接口方法。appendChild 方法允许您将节点添加到指定父节点的子节点末尾。下面是 appendChild 方法的语法：

parentNode.appendChild(childNode);

在此方法中， childNode 是要附加到指定父节点的节点。appendChild 方法将会返回追加的元素。

如果 childNode 是 HTML 文档中已存在的节点，则 appendChild() 方法将childNode 从当前位置移动到新位置。

JavaScript appendChild 示例

下面是是一些使用 appendChild 方法的例子。

简单的 appendChild 例子

假设您有以下 HTML 片段：

<ul id="menu"></ul>

下面的示例使用 appendChild 方法向 <ul> 元素添加三个 li 元素 ：

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'));

代码是如何运行的：

  • 首先，createMenuItem() 函数使用 createElement 方法创建一个指定名称的 li 元素。
  • 其次，使用 querySelector 方法选择属性 id 的值是 menu 的 <ul> 元素。
  • 最后、调用 createMenuItem() 函数创建新的 li 元素并使用 appendChild 方法将 li 元素追加到 <ul> 元素的子元素中。

输出：

<ul id="menu">
    <li>Home</li>
    <li>Services</li>
    <li>About Us</li>
</ul>

把它们放在一起：

<!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>

在文档示例中移动节点

假设您有两个列表分别是 first-list 和 second-list：

<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>

下面的示例使用 appendChild  将第一个子元素从第一个列表移动到第二个列表：

const firstList = document.querySelector('#first-list');
const everest = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');
secondList.appendChild(everest)

代码是如何运行的：

  • 首先，使用 querySelector 方法通过属性 id 值是 first-list 选择第一个列表的  ul 元素。
  • 其次，从第一个列表中选择第一个子元素。
  • 第三，使用 querySelector 方法通过属性 id 值是 second-list 选择第二个列表的 ul 元素。
  • 最后，使用 appendChild 方法将第一个列表中的第一个子元素追加到第二个列表。

结论

使用 appendChild 方法将节点添加到指定父节点的子节点末尾。appendChild 可用于将已存在节点移动到 HTML 文档中的新位置。