Nhân bản phần tử trong JavaScript

Trong bài học này, chúng ta sẽ học cách lấy bản sao của các phần tử. Có thể làm việc với những bản sao này như với các phần tử thông thường - thay đổi chúng và chèn vào vị trí mong muốn trên trang. Quá trình lấy bản sao phần tử được gọi là nhân bản (cloning).

Có thể nhân bản một phần tử bằng phương thức cloneNode. Cần truyền vào phương thức này tham số 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 false - chỉ bản thân phần tử đó.

Hãy xem một ví dụ. Giả sử chúng ta có mã như sau:

<div id="parent">
	<div class="elem">
		<p>đoạn văn thứ nhất</p>
		<p>đoạn văn thứ hai</p>
	</div>
</div>

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:

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

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

Kết quả sẽ như sau:

<div id="parent">
	<div class="elem">
		<p>đoạn văn thứ nhất</p>
		<p>đoạn văn thứ hai</p>
	</div>
	<div class="elem">
		<p>đoạn văn thứ nhất</p>
		<p>đoạn văn thứ hai</p>
	</div>
</div>

Cho một input. Cho một nút bấm. Khi nhấn vào nút, hãy nhân bản input này.