Skip to content
Related Articles

Related Articles

HTML DOM appendChild() Method

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 01 Dec, 2022
Improve Article
Save Article

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




<style>
    h1,h2 {
        font-weight: bold;
        color: green;
    }
      
    body {
        margin-left: 130px;
    }
</style>
  
<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>


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




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


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
  • Internet Explorer 5.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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!