appendChild JavaScript简介
appendChild JavaScript是一种方法，它有助于在现有子节点的末尾添加节点。它有助于创建一个文本节点，该节点将位于最后一个子节点之后。它也有助于在一个对象中添加元素，一个接着一个。这个函数创建一个文本节点，然后把它附加到现有的元素上。一旦元素被添加，它就把整个元素附加到文档中。
appendChild JavaScript是如何工作的？
为了在JavaScript工作中使用appendChild，我们必须首先了解其语法。
这个方法的语法如下。
node.appendChild(node)
这个方法只接受一个参数，而且是强制性的。这将是要被追加的对象或元素。这个函数的返回值是，这个孩子将被追加到现有的文档中。它将返回带有被附加的子元素的元素。
let ap = document.createElement("ap");
document.body.appendChild(ap)。
让我们看看这个函数是如何工作的。在上面的片段中，我们创建了一个元素'ap'。这个元素在文档对象模型中并不存在。它将作为一个结果，创建这个元素。现在我们将不得不把这个对象追加到某个元素上。因此，上面的第二条语句将这个子元素附加到body上。主体上面的层次结构是文档。因此，我们遵循这个层次结构。首先是文档、元素，最后是要附加的对象。在上面的片段中，新创建的对象被附加到了我们现有的文档中。
appendChild JavaScript的例子
下面是appendChild JavaScript的例子。
例子#1
代码。
<!DOCTYPE html> <html> <head> <title>Demo for appendChild() Method</title> <style> h1, h2 { font-weight: italic; color: blue; } body { margin-left: 150px; } </style> </head> <body> <h1>EduCBA</h1> <h2>Demo for appendChild() Method</h2> <ul id="edu"> <li>Computer Science</li> <li>Data Analytics using Python</li> </ul> <button onclick="educba()">Submit</button> <script> function educba() { var node = document.createElement("LI"); var textnew = document.createTextNode("Data Analytics"); node.appendChild(textnew); document.getElementById("edu").appendChild(node); } </script> </body> </html>
上面的JavaScript代码是appendChild函数的一个演示程序。我们已经定义了字体样式和颜色。脚本的主体已经填充了一些与计算机科学相关的主题。有一个节点，我们在那里创建了一个元素。这是一个文本节点，我们将把它追加到现有的科目列表中。一旦我们点击提交按钮，这个新的子节点就会被追加。文本节点被创建为所需的文本。这里是 "数据分析"。然后我们使用appendChild函数，将'textnew'作为参数发送给该函数。一旦节点被追加，我们就通过使用ElementByID将这个新创建的对象追加到文档中。我们把这个节点作为参数传给这个appendChild函数。
输出。
在两个现有主题的末尾有一个提交按钮。当我们点击这个提交按钮时，它将追加我们添加的新主题。请看下面点击提交时的输出。
数据分析被添加到两个现有的主题之后。
例子#2
代码。
<!DOCTYPE html> <html> <head> <title>Demo appendChild() Exampl 2</title> <style> #sudo { border: 1px solid yellow; background-color: yellow; margin-bottom: 10px; color: red; font-weight: bold; } h1, h2 { text-align: right; color: orange; font-weight: bold; } </style> </head> <body> <h1>EduCBA</h1> <h2>Demo appendChild() Exampl 2</h2> <div id="sudo"> The Website we should choose for learning computer science is - </div> <button onclick="edu()">Submit</button> <script> function edu() { var node = document.createElement("P"); var t = document.createTextNode("EduCBA"); node.appendChild(t); document.getElementById("sudo").appendChild(node); } </script> </body> </html>
让我们看看这段代码中发生了什么。
在这个程序中，我们正在追加一个节点。我们已经创建了JavaScript，在这里我们有不同的字体要显示。我们在这里创建了一个sudo id，它帮助我们显示一个特定的节点。这就是我们正在追加的模式。在这里，我们正在将节点追加到sudo id。在这个函数中，节点又被首先创建。我们通过使用div标签生成的ID来追加子节点。因此，在这里，我们利用getElementById来将元素追加到文档中。
输出。
在这里，如果你观察，你会看到一个提交按钮。一旦你点击提交，子注释将被追加，appendChild函数将被触发。
这将像下面这样工作。
例子 #3
代码。
<!DOCTYPE html> <html> <head> <title>Demo for appendChild method Example 3</title> <style> #sudo { border: 1px solid blue; background-color: blue; margin-bottom: 15px; color: white; font-weight: bold; } h1, h2 { text-align: center; color: blue; font-weight: bold; } </style> </head> <body> <h1>EduCBA</h1> <h2>Example 3: Multiple appends</h2> <ul id="menu"> </ul> <script> function createMultipleAppend(name) { let li = document.createElement('li'); li.textContent = name; return li; } // get the ul#menu const menu = document.querySelector('#menu'); // adding multiple items to the menu by using appendChild menu.appendChild(createMultipleAppend('Home')); menu.appendChild(createMultipleAppend('Services')); menu.appendChild(createMultipleAppend('About Us')); </script> </body> </html>
上面的程序是一个在同一程序中使用多个追加的例子。我们使用了一个脚本，在网页上追加了多个元素。我们利用了
- 标签，这将帮助我们系统地显示列出的项目。我们在这里创建了一个恒定的菜单，我们直接使用appendChild函数。之后，我们直接调用appendChild函数，这有助于我们显示所有的项目。
输出。
如果你检查一下，我们通过使用子弹来显示附加的数据。我们已经使用了多个附录并显示了数据。
总结
appendChild函数帮助我们将对象附加到当前元素上，然后该元素可以被附加到现有的文档中。这可以帮助我们在现有的元素和文档模型中轻松添加新的对象。我们可以创建文本节点并使用它们将其附加到文档中。它也可以用来移动任何现有的子节点到文档中指定的新位置。
推荐文章
这是一个关于appendChild JavaScript的指南。在这里，我们讨论了介绍；appendChild JavaScript是如何工作的？还有一些例子。你也可以看看下面的文章来了解更多
The postappendChild JavaScriptappeared first onEDUCBA.
