HTML | DOM appendChild() Method

The appendChild() method is used to create a text node as the last child of the node. This method 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 single parameter node which is mandatory and used to specify the node object which need to append.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers: The browser supported by DOM appendChild Method() are listed below:

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.