JavaScript에서 요소 복제하기

이번 강의에서는 요소의 사본을 얻는 방법을 배울 것입니다. 이 사본들은 일반 요소와 마찬가지로 작업할 수 있습니다 - 변경하고 페이지의 원하는 위치에 삽입할 수 있습니다. 요소의 사본을 얻는 과정을 복제(클로닝)이라고 합니다.

요소는 cloneNode 메서드를 사용하여 복제할 수 있습니다. 이 메서드에는 매개변수로 true 또는 false를 전달해야 합니다. true가 전달되면 요소는 모든 속성과 자식 요소와 함께 완전히 복제되고, false가 전달되면 요소 자체만 복제됩니다.

예제를 통해 살펴보겠습니다. 다음과 같은 코드가 있다고 가정해 봅시다:

<div id="parent">
	<div class="elem">
		<p>첫 번째 단락</p>
		<p>두 번째 단락</p>
	</div>
</div>

클래스 elem를 가진 블록의 사본을 만들고 #parent 블록 끝에 삽입해 보겠습니다:

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

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

결과는 다음과 같습니다:

<div id="parent">
	<div class="elem">
		<p>첫 번째 단락</p>
		<p>두 번째 단락</p>
	</div>
	<div class="elem">
		<p>첫 번째 단락</p>
		<p>두 번째 단락</p>
	</div>
</div>

인풋이 주어져 있습니다. 버튼이 주어져 있습니다. 버튼을 클릭하면 이 인풋을 복제하세요.