DOM Node

웹 페이지에 새로운 요소를 만들어 넣거나 필요 없는 부분을 제거하는 DOM 노드 추가 및 삭제 방법에 대해 알아보겠습니다.

단순히 글자를 바꾸는 것을 넘어, 사용자의 동작에 따라 새로운 목록을 만들거나 창을 띄울 때 필수적인 기술입니다.

---

📘 1. 노드 생성과 추가 (Creation & Insertion)

새로운 HTML 요소를 화면에 나타나게 하려면 **'생성 → 설정 → 부착'**의 3단계를 거쳐야 합니다.

[1단계] 요소 생성

document.createElement()를 사용하여 메모리상에 새로운 태그 객체를 만듭니다.

JavaScript

 

const newLi = document.createElement('li'); // <li> 태그 생성

[2단계] 내용 및 속성 설정

생성된 태그 안에 글자를 넣거나 클래스를 지정합니다.

JavaScript

 

newLi.textContent = '새로운 할 일';
newLi.classList.add('item');

[3단계] 부모 노드에 부착

어느 위치에 넣을지 결정하여 부모 노드에 연결합니다.

• appendChild(): 부모의 가장 마지막 자식으로 추가합니다.
• prepend(): 부모의 가장 첫 번째 자식으로 추가합니다.

---

📘 2. 노드 삭제 (Removal)

화면에 있는 요소를 지우는 방법은 크게 두 가지가 있습니다.

• remove(): 삭제하고 싶은 요소 자신을 바로 지웁니다. (현대적 방식)
• removeChild(): 부모 노드에서 특정 자식 노드를 선택하여 지웁니다. (전통적 방식)

JavaScript

 

const target = document.querySelector('.old-item');
target.remove(); // 스스로 삭제

---

📘 3. 주요 메서드 한눈에 보기 (요약 표)

학생들이 암기하기 좋도록 핵심 메서드들을 정리한 표입니다.

구분	메서드	설명
생성	createElement(tagName)	새로운 요소 노드를 만들어 반환함
추가	appendChild(node)	부모 노드의 마지막 자식으로 노드를 추가함
추가	prepend(node)	부모 노드의 첫 번째 자식으로 노드를 추가함
추가	before(node) / after(node)	기준 노드의 앞 또는 뒤 형제 노드로 추가함
삭제	remove()	해당 노드를 DOM 트리에서 완전히 제거함
삭제	removeChild(node)	부모 노드에서 특정 자식 노드를 제거함
복제	cloneNode(deep)	노드를 복사함 (deep이 true면 자식까지 복사)

---

🖥️ 실전 예제 코드: "리스트 추가 및 삭제"

JavaScript

 

// 1. 부모 요소와 버튼 선택
const list = document.querySelector('#todoList');
const addBtn = document.querySelector('#addBtn');

// 2. 추가 버튼 클릭 이벤트
addBtn.addEventListener('click', () => {
    // 요소 생성
    const newItem = document.createElement('li');
    newItem.textContent = '클릭으로 생성된 아이템';
    
    // 삭제 버튼도 함께 생성
    const delBtn = document.createElement('button');
    delBtn.textContent = '삭제';
    delBtn.onclick = () => newItem.remove(); // 클릭 시 해당 li 삭제
    
    newItem.appendChild(delBtn); // li 안에 버튼 넣기
    list.appendChild(newItem);   // ul 안에 li 넣기
});

---

오늘의 요약

• **createElement**로 상자를 만들고, **appendChild**로 벽에 붙인다.
• 최신 브라우저에서는 remove() 한 줄이면 깔끔하게 삭제된다.
• 요소를 추가할 때는 반드시 '어떤 부모' 밑에 들어갈지 지정해 주어야 한다.

---

이제 DOM의 생성과 소멸까지 마스터하셨습니다!

---