HTML DOM cloneNode() मेथड का उपयोग उस नोड की एक कॉपी बनाने के लिए किया जाता है जिस पर cloneNode() मेथड कॉल किया जाता है और यह क्लोन को वापस करता है। cloneNode() मेथड दिए गए नोड के सभी एट्रिब्यूट्स और वैल्यूज को क्लोन करता है।
सिंटैक्स (Syntax)
cloneNode() मेथड का सिंटैक्स:
yourNode.cloneNode([deep])
यहां, deep एक वैकल्पिक पैरामीटर है। इसका मान true सेट करके हम निर्दिष्ट करते हैं कि दिए गए नोड और उसके चिल्ड्रन को उनके एट्रिब्यूट्स और वैल्यूज के साथ क्लोन किया जाना चाहिए और इसका मान false सेट करके हम निर्दिष्ट करते हैं कि हम केवल दिए गए नोड और उसके एट्रिब्यूट्स और वैल्यूज को कॉपी करना चाहते हैं, उसके चाइल्ड नोड्स को नहीं।
उदाहरण (Example)
HTML DOM cloneNode() मेथड का एक उदाहरण:
<!DOCTYPE html> <html> <head> <title>CLONE NODE</title> <style> h1 { color: green; } h2 { color: blue; } </style> </head> <body> <div id="DIV1"> <h1> HEADING 1</h1> <h2> HEADING 2</h2> </div> <button onclick="CloneEle()"> CLONE </button> <script> function CloneEle() { var x = document.getElementById("DIV1"); var clone = x.cloneNode(true); document.body.appendChild(clone); } </script> </body> </html>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
CLONE बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने एक डिव बनाया है जिसके अंदर <h1> और <h2> एलिमेंट्स हैं। <h1> और <h2> एलिमेंट्स के अपने स्टाइल्स हैं।
h1 { color: green; } h2 { color: blue; } <div id="DIV1"> <h1> HEADING 1</h1> <h2> HEADING 2</h2> </div>फिर हमने एक CLONE बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर CloneEle() फंक्शन को एक्जीक्यूट करेगा:
<button onclick="CloneEle()"> CLONE </button>
CloneEle() मेथड getElementById() मेथड का उपयोग करके डिव एलिमेंट को प्राप्त करेगा और इसे वेरिएबल x में असाइन करेगा। फिर हम पैरामीटर true के साथ <div> पर cloneNode(true) मेथड का उपयोग करके इसे और इसके चाइल्ड एलिमेंट्स को क्लोन करेंगे और उन्हें वेरिएबल clone में असाइन करेंगे। clone वेरिएबल को फिर document.body के appendChild() मेथड का उपयोग करके डॉक्यूमेंट बॉडी में जोड़ा जाता है:
function CloneEle() { var x = document.getElementById("DIV1"); var clone = x.cloneNode(true); document.body.appendChild(clone); }
