The appendChild function is part of the Node interface within JavaScript. This method allows us to insert a node at the conclusion of a designated parent node's list of child nodes.
Syntax:
The syntax of the appendchild method is:
parentNode.appendChild(childNode)
Within the syntax, the childNode represents the node that is being added to the designated parent node. The appendChild function yields the child node that has been appended. If the childNode is associated with an existing node within the document, the appendChild method relocates the childNode from its current location to the newly specified position.
JavaScript appendChild method examples
Next, we will examine several instances of the appendChild method, which will aid in comprehending its functionality.
Example 1: Simple appendChild example
In the case that we possess an HTML list and wish to append a new item at the end, we can utilize the appendChild function.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript appendChild() Method</title>
<style>
</style>
</head>
<body>
<h1>Example Site</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>
Upon running the aforementioned code, the resulting output will be displayed as illustrated below:
As previously demonstrated, there exists an Append button. Upon clicking this button, the appendChild method is utilized to add the value of the child node to its corresponding parent node, as illustrated below:
Example 2: Multiple nodes appends dynamically
In this instance, we dynamically add several nodes to the parent node.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript appendChild() Method</title>
</head>
<body>
<h1>Example Site</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>
Upon running the code provided above, the output will be displayed as illustrated below:
As illustrated in the screenshot, there exists a Submit button. Upon clicking this button, the appendChild method is utilized to dynamically add several child nodes, as demonstrated 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
At this point, let's consider a practical example to grasp how we can relocate a node within the document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild()</title>
</head>
<body>
<h1>Example Site</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>
Upon running the aforementioned code, the resulting output will appear as demonstrated 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