JavaScript appendchild() method

The appendChild() is a method of the Node interface in JavaScript. The appendChild() method enables us to add a node to the end of a specified parent node's child node list.

Syntax:

The syntax of the appendchild() method is:

In the syntax, the childNode is the node that adds to the specified parent node. The appendChild() method returns the appended child node. The appendChild() method transfers the childNode from its current position to the new position if the childNode is relative to an existing node in the document.

JavaScript appendChild() method examples

Now, we will take few examples of appendChild(), which helps to understand how it works.

Example 1: Simple appendChild() example

If we have an HTML list and want to add a new item to the end, we could use the appendChild() method.

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

Output: After executing this above code, we will get the output as shown below:

As we have seen above there is a Append button, when we click on this button, the appendChild() method add the child node value to its parent node, as shown below:

Example 2: Multiple nodes appends dynamically

In this example, we append the multiple nodes dynamically in the parent node.

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

Output: After executing the above code, we will get the output as shown below:

As we have seen in the screenshot, there is a Submit button. When we click on this button, the appendChild() method add the multiple child nodes dynamically, as shown below:

Explanation:

Firstly, we create a new <ul> element using a createElement() function.
After that, we create <li> elements dynamically and append them to the <ul>
Finally, we append the <ul> element to <div>

Example 3: Moving a node within the document

Now, let's take an example to understand how we can move a node within the document.

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

Output: After executing the above code, we will get the output as shown below:

Explanation:

First of all, we need to choose the first element from its first list using the querySelector()
Now, choose the first child element from the first list.
After that, choose the second element from its second list using the querySelector()
Finally, append the first child element to the second list using the appendChild()