Skip to content
Related Articles

Related Articles

HTML DOM appendChild() Method

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!