JavaScript appendChild()方法

appendChild() 方法是JavaScript中Node接口的方法。 appendChild() 方法使我们能够在指定的父节点子节点列表的末尾添加一个节点。

语法:

appendChild() 方法的语法如下：

parentNode.appendChild(childNode)

在语法中， childNode 是添加到指定父节点的节点。 appendChild() 方法返回已添加的子节点。如果 childNode 相对于文档中的现有节点是相关联的，则 appendChild() 方法将 childNode 从其当前位置转移到新位置。

JavaScript appendChild()方法示例

现在，我们将进行 appendChild() 的一些示例，以帮助理解其工作原理。

示例1：简单的appendChild()示例

如果我们有一个HTML列表，并希望在末尾添加一个新项，我们可以使用 appendChild() 方法。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript appendChild() Method</title>
    <style>
    </style>
</head> 
<body>
    <h1>JavaTPoint</h1>
    <h2>JavaScript appendChild() Method</h2>
    <ul id="languages">
        <li>Python</li>
        <li>Java</li>
    <li>Data Structure</li>
    </ul>
    <button onclick="append()">Append</button>
    <script>
        function append() {
            var node = document.createElement("LI");
            var textnode = 
                document.createTextNode("C#");
            node.appendChild(textnode);
            document.getElementById("languages").appendChild(node);
        }
    </script>
</body>
</html>

输出： 在执行上述代码后，我们将得到如下所示的输出：

JavaScript appendChild()方法

如上所述，有一个追加按钮，当我们点击这个按钮时， appendChild() 方法将子节点的值添加到其父节点中，如下所示：

JavaScript appendChild()方法

示例2：动态添加多个节点

在这个示例中，我们在父节点中动态添加多个节点。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript appendChild() Method</title>
</head>
<body>
    <h1>JavaTPoint</h1>
    <h2>JavaScript appendChild() Method</h2>
<div id="menu"></div>
<button onclick="append()">Submit</button>
<script>
function append() {
  var lang = ["C#", "Java", "Python"];
  var ul = document.createElement("ul");
  for(i = 0; i < lang.length; i++){
    var li = document.createElement("li");
    li.innerHTML = lang[i];
    ul.appendChild(li);
  }
  document.getElementById("menu").appendChild(ul);
}
</script>
</body>
</html>

输出： 在执行以上代码之后，我们将会得到如下所示的输出：

JavaScript appendChild()方法

解释：

首先，我们使用 createElement() 函数创建一个新的 <ul> 元素。
然后，我们动态创建 <li> 元素并将它们添加到 <ul> 中。
最后，我们将 <ul> 元素添加到 <div> 中。

示例3：在文档中移动节点

现在，让我们通过一个示例来理解如何在文档中移动节点。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript appendChild()</title>
</head>
<body>
<h1>JavaTPoint</h1>
    <h2>JavaScript appendChild() Method</h2>
<ul id="first-list">
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
</ul>
<ul id="second-list">
    <li>Ruby</li>
    <li>Java</li>
    <li>C#</li>
</ul>
    <script>
        function createMenuItem(lang) {
            let li = document.createElement('li');
            li.textContent = lang;
            return li;
        }
const firstList = document.querySelector('#first-list');
// select the first child element from the first-list
const python = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');
// now, append the first element of the first-list to the second-list
secondList.appendChild(python)
    </script>
</body>
</html>

输出: 执行以上代码后，我们将得到如下所示的输出：

JavaScript appendChild()方法