revision:
The cloneNode() method creates a copy of a node, and returns the clone.The cloneNode() method clones all attributes and their values.
Set the "deep" parameter to true if you also want to clone descendants (children).
node.cloneNode(deep)
Parameters:
deep : optional. "false" - Default. Clone only the node and its attributes. "true" - Clone the node, its attributes, and its descendants.
const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);
The cloneNode() method of the Node interface returns a duplicate of the node on which this method was called. Its parameter controls if the subtree contained in a node is also cloned or not.
Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g., node.onclick = someFunction). Additionally, for a <canvas> element, the painted image is not copied.
To clone a node to insert into a different document, use Document.importNode() instead.
node.cloneNode()
node.cloneNode(deep)
Parameters:
deep : optional. "false" - Default. Clone only the node and its attributes. The subtree, including any text that the node contains, is not cloned. "true" - Clone the node, its attributes, and its descendants. Then the node and its whole subtree, including text that may be in child Text nodes, is also copied.
Note that deep has no effect on void elements, such as the <img> and <input> elements.
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);
If you change the deep parameter to false, only an empty Li element will be cloned.
<div>
<button onclick="cloneFunction()">Copy</button>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p>If you change the <b>deep</b> parameter to false, only an empty Li element will be cloned.</p>
</div>
<script>
function cloneFunction() {
const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);
}
</script>
cloned menu:
<div>
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<p> cloned menu: <span id="clone-1"></span></p>
</div>
<script>
let menu = document.querySelector('#menu');
let clonedMenu = menu.cloneNode(true);
clonedMenu.id = 'menu-mobile';
document.getElementById("clone-1").appendChild(clonedMenu);
</script>
cloned paragraph:
<div>
<div id="clone-2"></div>
<p>cloned paragraph:<span id="clone-3" style="color:red"></span></p>
</div>
<script>
var para = document.createElement("p");
var message = document.createTextNode("hello world, welcome to this chat");
para.appendChild(message);
document.getElementById('clone-2').appendChild(para);
var newpara = para.cloneNode(true);
document.getElementById("clone-3").appendChild(newpara);
</script>