How to use JavaScript Dom Node appendchild

In this article I have described about Dom Node appendchild() method in JavaScript.
  • 2606

JavaScript Dom Node appendchild() method

  • As we already know that node object is used to represent and add node within the HTML document.
  • The node within document can be an element, an attribute, a text, a comment and may be a document itself.
  • The appendchild() method add a node as a last child of a node or to move an element from one element to another.

Browser support

Following are the main browsers which support the prototype Property of boolean object

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

Syntax

The appendchild() method of Dom Node object has following syntax

node.appendchild(node)

Lets take an example

<!DOCTYPE html>

<html>

<body style ="background-color:yellow">

<ul id="menu"><li>colddrink</li><li>milk</li><li>softdrink</li></ul>

<p id="demo">APPEND THE ITEM TO LIST</p>

<button onclick="myFunction()">APPEND</button>

<script type="text/javascript">

    function myFunction()

    {

        var node = document.createElement("LI");

        var textnode = document.createTextNode("milk");

        node.appendChild(textnode);

        document.getElementById("menu").appendChild(node);

    }

</script>

</body>

</html>

 

Output

 

 DN APND1.jpg

 

when we click on button


DN APND2.jpg

Further Readings

You may also want to read these related articles :here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.