HTML DOM appendChild() Method

Last Updated : 11 Sep, 2024

The HTML DOM appendChild() method adds a new child node to the end of a specified parent node's child list. It can move existing nodes or add new nodes, allowing dynamic updates to the document structure by appending elements, text, or other nodes.

Syntax:

node.appendChild(node);

Parameters: This method accepts a single parameter node which is mandatory and used to specify the node object that needs to be appended.

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>
        HTML 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() {
            let node = document.createElement("LI");
            let textnode = document.createTextNode("Web Technology");
            node.appendChild(textnode);
            document.getElementById("gfg").appendChild(node);
        }
    </script>
</body>

</html>

Output:

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>
        HTML 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() {
            let node = document.createElement("P");
            let t = document.createTextNode("GeeksforGeeks");
            node.appendChild(t);
            document.getElementById("sudo").appendChild(node);
        }
    </script>
</body>

</html>

Output:

Used Methods with appendChild()

document.createElement(): Creates a new HTML element specified by the tag name. If the element name is not recognized, an unknown HTML element is created.
document.createTextNode(): Creates a text node containing a string. This method is used to add text to an element.
document.getElementById(): Retrieves an element by its ID, allowing for targeted appending of nodes.

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:

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.

HTML DOM appendChild() Method

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

HTML DOM appendChild() Method

Used Methods with appendChild()

Similar Reads

Thank You!

What kind of Experience do you want to share?