cloneNode विधि

cloneNode विधि किसी तत्व को क्लोन करके उसकी सटीक प्रतिलिपि प्राप्त करने की अनुमति देती है। इस प्रतिलिपि को फिर prepend, append, appendChild, insertBefore या insertAdjacentElement जैसी विधियों का उपयोग करके पेज पर इन्सर्ट किया जा सकता है।

यह विधि पैरामीटर के रूप में true या false प्राप्त करती है। यदि true पास किया जाता है, तो तत्व पूरी तरह से क्लोन हो जाता है, सभी विशेषताओं और चाइल्ड तत्वों के साथ, और यदि false - केवल स्वयं तत्व (चाइल्ड तत्वों के बिना)।

सिंटैक्स

तत्व.cloneNode(true या false);

उदाहरण

आइए elem क्लास वाले ब्लॉक की एक प्रतिलिपि बनाएं और इसे #parent ब्लॉक के अंत में इन्सर्ट करें:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

कोड निष्पादित करने का परिणाम:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

उदाहरण

प्राप्त क्लोन के साथ आप एक सामान्य तत्व की तरह काम कर सकते हैं:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

कोड निष्पादित करने का परिणाम:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

यह भी देखें

createElement विधि,
जिसका उपयोग करके एक नया तत्व बनाया जा सकता है