მეთოდი 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,
რომლის დახმარებითაც შესაძლებელია ახალი ელემენტის შექმნა