How To Use HTML DOM AppendChild Method In JavaScript

Posted By Bajarangi soft , Posted On 27-09-2020

In Java script on click of button we can add or append an item in a list so today we are going to discuss how to use append child method in java script

How To Use HTML DOM AppendChild Method In JavaScript

The appendChild() method appends a node as the last child of a node.

If you want to create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.

You can also use this method to move an element from one element to another (See "More Examples").

Use the insertBefore() method to insert a new child node before a specified, existing, child node.

Syntax and Usage

node.appendChild(node)

Parameter Values

node    Node object    Required. The node object you want to append

Return Value: A Node Object, representing the appended node

Example(1)

<ul id="List">
    <li>Rose</li>
    <li>Lily</li>
    <li>Lotus</li>
</ul>

<button class="btn btn-primary" onclick="append()">Click it</button>
<script>
    function append() {
        var node = document.createElement("LI");
        var textnode = document.createTextNode("Pink Rose");
        node.appendChild(textnode);
        document.getElementById("List").appendChild(node);
    }
</script>

In above example when i click the button it will append an item to the end of the list.

Example(2)

<ul id="List">
    <li>Rose</li>
    <li>Lily</li>
    <li>Lotus</li>
</ul>
<ul id="myList2"><li>Honey bird</li><li>Parrot</li></ul>

<button class="btn btn-primary" onclick="append()">Click it</button><br><br>
<button class="btn btn-primary" onclick="merge()">Click it</button><br><br>
<script>
    function append() {
        var node = document.createElement("LI");                 // Create a <li> node
        var textnode = document.createTextNode("Pink Rose");         // Create a text node
        node.appendChild(textnode);                              // Append the text to <li>
        document.getElementById("List").appendChild(node);     // Append <li> to <ul> with id="myList"
    }
    function merge() {
        var node = document.getElementById("myList2").lastChild;
        document.getElementById("List").appendChild(node);
    }
</script>

In above example when i click the button it well merge or move an item from one list to another.

Complete code for HTML DOM AppendChild Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM AppendChild Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM AppendChild Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <ul id="List">
            <li>Rose</li>
            <li>Lily</li>
            <li>Lotus</li>
        </ul>
        <ul id="myList2"><li>Honey bird</li><li>Parrot</li></ul>
        <button class="btn btn-primary" onclick="append()">Click it</button><br><br>
        <button class="btn btn-primary" onclick="merge()">Click it</button><br><br>
    </div>
    <br>
</div>
</body>
</html>
<script>
    function append() {
        var node = document.createElement("LI");                 // Create a <li> node
        var textnode = document.createTextNode("Pink Rose");         // Create a text node
        node.appendChild(textnode);                              // Append the text to <li>
        document.getElementById("List").appendChild(node);     // Append <li> to <ul> with id="myList"
    }
    function merge() {
        var node = document.getElementById("myList2").lastChild;
        document.getElementById("List").appendChild(node);
    }
</script>

Related Post