How to use JavaScript Dom Node CloneNode

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

JavaScript Dom Node CloneNode() method

  • As we already know that node object is used to represent and add node within the HTML document.
  • The cloneNode() method create a copy of all the properties and values of node and return a clone of a node.

Browser support

Following are the main browsers which support the cloneNode() method of Dom Node object

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

Syntax

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

node.cloneNode(deep)

Note - If we want to clone all the descendants then value of deep parameter set to be true otherwise it should be false.

Lets take an example

<!DOCTYPE html>

<html>

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

<ul id="myList1"><li>colddrink</li><li>milk</li></ul>

<ul id="myList2"><li>softdrink</li><li>water</li></ul>

<p id="demo">COPY AN ITEM FROM ONE LIST TO ANOTHER</p>

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

<script type="text/javascript">

    function myFunction()

    {

        var itm = document.getElementById("myList2").lastChild;

        var cln = itm.cloneNode(true);

        document.getElementById("myList1").appendChild(cln);

    }

</script>

</body>

</html>

 

Output


dn clone1.jpg


When we click om button


dn clone2.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.