Skip to content
Related Articles

Related Articles

HTML | DOM appendChild() Method
  • Difficulty Level : Basic
  • Last Updated : 25 Jul, 2019

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:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :