HTML DOM appendChild() Method - GeeksforGeeks

15 Nov, 2021
In this article, we will learn about the appendChild() method in HTML DOM in Javascript, along with will understand its implementation through the examples.
The appendChild() method of the node interface, is used to create a text node as the last child of the node. This method is also used to move an element from one element to another element. It is used for creating a new element with some text then first create the text as the text node and then append it to the element, then append the element to the document.
Syntax:
node.appendChild(node);
Parameters: This method accepts a single parameter node which is mandatory and used to specify the node object which needs to be appended.
We will use the document.createElement() method that is used to create the HTML element ie., element specified with elementName will be created or an unknown HTML element will be created if the specified elementName is not recognized. We will also use the createTextNode() method to create the TextNode that will contain the element node and a text node. This method is used to provide text to an element that will contain the text values as parameters & it is of string type. The getElementById() method will return the elements containing the given ID which will be passed to the function. 
Example 1: This example describes the use of the appendChild() method that will create the text node as the last child of the node.
HTML
<!DOCTYPE html><html> <head>    <title>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() {        var node = document.createElement("LI");        var textnode = document.createTextNode("Web Technology");        node.appendChild(textnode);        document.getElementById("gfg").appendChild(node);    }    </script></body> </html>
Output:
DOM appendChild() Method
Example 2: This example describes the use of the appendChild() method by appending the text to the document after clicking the submit button.
HTML
<!DOCTYPE html><html> <head>    <title>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() {        var node = document.createElement("P");        var t = document.createTextNode("GeeksforGeeks");        node.appendChild(t);        document.getElementById("sudo").appendChild(node);    }    </script></body> </html>
Output:
DOM appendChild() Method
Supported Browsers: The browser supported by DOM appendChild() Method are listed below:
Google Chrome 1.0
Internet Explorer 5.0
Microsoft Edge 12.0
Firefox 1.0
Opera 5.0
Safari 1.1
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
HTML-DOM
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?