JavaScript로 요소 생성 및 삽입

이제 우리는 JavaScript를 통해 새로운 DOM 요소를 생성하고 페이지에 추가하는 방법을 배울 것입니다. 이를 위해 createElement 메소드가 사용됩니다. 이 메소드의 매개변수로는 생성해야 할 태그의 이름을 전달해야 합니다.

createElement의 작업 결과를 변수에 저장하면, 그 변수에는 마치 querySelector를 통해 가져온 것과 같은 요소가 들어갑니다.

유일한 차이점은 우리의 요소가 페이지에 배치되지 않는다는 점입니다. 그 외에는 텍스트를 변경하고, 속성을 설정하며, 이벤트 핸들러를 추가하고, 최종적으로 페이지에 배치할 수 있습니다.

새로운 요소를 페이지에 배치하기 위해 appendChild 메소드가 사용됩니다. 이 메소드는 우리의 요소를 넣고자 하는 요소에 적용해야 합니다. 그리고 메소드의 매개변수로는 이전에 createElement를 통해 생성한 우리의 새 요소를 전달해야 합니다.

실제 예를 살펴보겠습니다. 우리에게 하나의 div와 그 안에 몇 개의 문단이 있다고 가정합시다:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

문단을 하나 생성하고, 텍스트를 설정한 후 #parent 블록의 끝에 페이지에 배치해 봅시다:

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

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

코드 실행 결과:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

다음 ol이 주어졌습니다:

<ol id="elem"></ol>

ol의 끝에 텍스트가 'item'인 li를 삽입하세요.

다음 ol과 버튼이 주어졌습니다:

<ol id="elem"></ol>
<button id="button">click me</button>

버튼을 클릭하면 목록의 끝에 텍스트가 'item'인 li가 추가되도록 만드세요.