How to use JavaScript Dom Node CloneNode
In this article I have described about Dom Node CloneNode() method in JavaScript.
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
When we click om button
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