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