November 30, 2021

<aside> 💡 실무에선 대부분 insertAdjacentHTML을 사용합니다. 요소 삽입 메서드를 사용하면 코드 길이가 줄어들고, 노드나 텍스트 조각을 쉽게 삽입할 수 있습니다.

</aside>

생동감 있는’ 웹페이지를 만들기 위한 핵심은 DOM 조작에 있습니다.

이번 챕터에선 적시에 요소를 새롭게 생성하는 방법과 페이지에 있는 기존 콘텐츠를 어떻게 수정할 수 있는지 알아보겠습니다.

요소 생성하기

DOM 노드를 만들때 사용하는 메서드는 두 가지입니다.

**document.createElement(tag)**태그 이름(tag)을 사용해 새로운 요소 노드를 만듦

let div = document.createElement('div');

**document.createTextNode(text)**주어진 텍스트(text)를 사용해 새로운 텍스트 노드를 만듦

let textNode = document.createTextNode('안녕하세요.');

개발을 할 땐 위 예시(메시지가 들어가는 div)처럼 주로 요소 노드를 만들게 됩니다.

메시지 생성하기

메시지가 들어갈 div는 세 단계로 만들 수 있습니다.

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

이렇게 세 단계를 거치면 요소가 만들어집니다. 그런데 요소를 만들긴 했지만, 아직 이 요소는 div라는 이름을 가진 변수에 불과하기 때문에 페이지엔 나타나지 않습니다.

여기서는 document.body에서 append를 호출했지만 다른 요소에도 append 메서드를 호출해 요소를 넣을 수 있습니다. div.append(anotherElement)를 호출해 <div>에 무언가를 추가하는 것처럼 말이죠.

자바스크립트에서 지원하는 노드 삽입 메서드는 다음과 같습니다. 적절한 메서드를 선택하면 직접 삽입 위치를 지정할 수 있습니다.