A cloneNode metódus

A cloneNode metódus lehetővé teszi egy elem klónozását és pontos másolatának elkészítését. Ezt a másolatot ezután be lehet szúrni az oldalra a prepend, append, appendChild, insertBefore vagy insertAdjacentElement metódusok segítségével.

A paraméterben a metódus true vagy false értéket kap. Ha true értéket adunk meg, akkor az elemet teljes egészében klónozza, minden attribútumával és gyermekelemével együtt, ha pedig false - csak magát az elemet (gyermekelemei nélkül).

Szintaxis

elem.cloneNode(true vagy false);

Példa

Készítsünk egy másolatot a elem osztállyal rendelkező blokkról és szúrjuk be a #parent blokk végére:

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

A kód végrehajtásának eredménye:

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

Példa

A kapott klónnal ugyanúgy lehet dolgozni, mint egy szokásos elemmel:

<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 = 'új text1';
clone.children[1].textContent = 'új text2';

parent.appendChild(clone);

A kód végrehajtásának eredménye:

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

Lásd még

a createElement metódus,
amellyel új elem hozható létre