Tutorialspoint.dev

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:

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



Example 2:

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

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter