Metodas cloneNode

Metodas cloneNode leidžia klonuoti elementą ir gauti jo tikslų kopiją. Šią kopiją vėliau galima įterpti į puslapį naudojant metodus prepend, append, appendChild, insertBefore arba insertAdjacentElement.

Parametre metodas priima true arba false. Jei perduodama true, elementas klonuojamas visiškai, kartu su visais atributais ir dukteriniais elementais, o jei false - tik pats elementas (be dukterinių elementų).

Sintaksė

elementas.cloneNode(true arba false);

Pavyzdys

Sukurkime bloko su klase elem kopiją ir įterpkime ją į #parent bloko pabaigą:

<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);

Kodo vykdymo rezultatas:

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

Pavyzdys

Su gautu klonu galima dirbti kaip su įprastu elementu:

<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);

Kodo vykdymo rezultatas:

<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>

Taip pat žiūrėkite

metodas createElement,
kuriuo galima sukurti naują elementą