Open In App

HTML DOM appendChild() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML DOM 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., an 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>
    <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:

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

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:

  • Google Chrome 1.0 and above
  • Microsoft Edge 12.0 and above
  • Firefox 1.0 and above
  • Opera 7.0 and above
  • Safari 1.1 and above

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.



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads