The HTML DOM appendChild() method adds a new child node to the end of a specified parent node's child list. It can move existing nodes or add new nodes, allowing dynamic updates to the document structure by appending elements, text, or other nodes.
Syntax:
node.appendChild(node);Parameters: This method accepts a single parameter node which is mandatory and used to specify the node object that needs to be appended.
Example 1: This example describes the use of the appendChild() method that will create the text node as the last child of the node.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM appendChild() Method
</title>
<style>
h1,
h2 {
font-weight: bold;
color: green;
}
body {
margin-left: 130px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM appendChild() Method</h2>
<ul id="gfg">
<li>Computer Network</li>
<li>Data Structures using C</li>
</ul>
<button onclick="geeks()">
Submit
</button>
<script>
function geeks() {
let node = document.createElement("LI");
let textnode = document.createTextNode("Web Technology");
node.appendChild(textnode);
document.getElementById("gfg").appendChild(node);
}
</script>
</body>
</html>
Output:
Example 2: This example describes the use of the appendChild() method by appending the text to the document after clicking the submit button.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM appendChild() Method
</title>
<style>
#sudo {
border: 1px solid green;
background-color: green;
margin-bottom: 10px;
color: white;
font-weight: bold;
}
h1,
h2 {
text-align: center;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM appendChild() Method</h2>
<div id="sudo">
The Good Website is learning for Computer Science is-
</div>
<button onclick="geeks()">
Submit
</button>
<script>
function geeks() {
let node = document.createElement("P");
let t = document.createTextNode("GeeksforGeeks");
node.appendChild(t);
document.getElementById("sudo").appendChild(node);
}
</script>
</body>
</html>
Output:
Used Methods with appendChild()
- document.createElement(): Creates a new HTML element specified by the tag name. If the element name is not recognized, an unknown HTML element is created.
- document.createTextNode(): Creates a text node containing a string. This method is used to add text to an element.
- document.getElementById(): Retrieves an element by its ID, allowing for targeted appending of nodes.
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.
Supported Browsers: The browser supported by DOM appendChild() Method are listed below:
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.