clone HTML elements by using just element.cloneNode()
📋 element.cloneNode() in JavaScript (Clone DOM Elements Like a Pro) 🧠 What Is cloneNode() ? In JavaScript, the cloneNode() method is used to create a copy (clone) of an existing DOM element. 🗣️ “Need a duplicate of a button, card, or any DOM element? Just clone it!” It’s perfect when you want to: Reuse a layout/template Duplicate UI components Copy DOM nodes dynamically without writing extra HTML 🔧 Syntax let clone = element.cloneNode(deep); element : The DOM node you want to clone. deep : A Boolean value: true → clone the element and all of its child nodes (deep clone) false → clone only the element itself, without children (shallow clone) 📦 Examples: Step-by-Step ✅ Example 1: Shallow Clone (Only Element) <div id="box"> <p>Hello World</p> </div> let original = document.getElementById("box"); let copy = original.cloneNode(false); // shallow document.body.appendChild(copy); 🔍 Result : It clones the ...
