Phương thức cloneNode

Phương thức cloneNode cho phép nhân bản một phần tử và thu được một bản sao chính xác của nó. Bản sao này sau đó có thể được chèn vào trang bằng các phương thức prepend, append, appendChild, insertBefore hoặc insertAdjacentElement.

Tham số của phương thức nhận giá trị true hoặc false. Nếu truyền true, phần tử sẽ được nhân bản hoàn toàn, cùng với tất cả các thuộc tính và phần tử con, còn nếu là false - chỉ bản thân phần tử đó (không bao gồm các phần tử con).

Cú pháp

phần tử.cloneNode(true hoặc false);

Ví dụ

Hãy tạo một bản sao của khối có lớp elem và chèn nó vào cuối khối #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);

Kết quả thực thi mã:

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

Ví dụ

Có thể làm việc với bản sao thu được như với một phần tử thông thường:

<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 = 'văn bản mới 1';
clone.children[1].textContent = 'văn bản mới 2';

parent.appendChild(clone);

Kết quả thực thi mã:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>văn bản mới 1</p>
		<p>văn bản mới 2</p>
	</div>
</div>

Xem thêm

phương thức createElement,
dùng để tạo một phần tử mới