자바스크립트 DOM 노드 관리 정리

노드 관리(Node Manipulation)란 자바스크립트를 이용해 웹페이지의 HTML 구조를 실시간으로 생성, 수정, 삭제, 복제하는 기술입니다. 인터랙티브한 웹 기능 구현의 핵심입니다.

---

✅ 1. 노드 추가

🔹 appendChild(): 마지막 자식으로 추가

let parent = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "새 항목";
parent.appendChild(newItem);

🔹 insertBefore(): 특정 자식 앞에 삽입

let parent = document.getElementById("list");
let newItem = document.createElement("li");
let beforeItem = document.getElementById("target");
parent.insertBefore(newItem, beforeItem);

📌 insertBefore(노드, null) 은 appendChild()와 동일한 효과입니다.

🔹 insertData(offset, text): 텍스트 노드 안에 삽입

let textNode = document.getElementById("text").firstChild;
textNode.insertData(5, " 나른한");

---

✅ 2. 노드 생성

🔹 createElement(): 새 HTML 요소 생성

let para = document.createElement("p");
para.textContent = "새 문단입니다.";
document.body.appendChild(para);

🔹 createTextNode(): 텍스트 노드 생성

let text = document.createTextNode("텍스트만!");
document.getElementById("box").appendChild(text);

🔹 createAttribute(): 속성 노드 생성 후 삽입

let attr = document.createAttribute("style");
attr.value = "color: red";
document.getElementById("title").setAttributeNode(attr);

📌 실제로는 다음 방식이 더 일반적입니다:

el.setAttribute("style", "color: red");

---

✅ 3. 노드 제거

🔹 removeChild(): 자식 노드 제거

let list = document.getElementById("list");
let item = document.getElementById("item");
list.removeChild(item);

🔹 removeAttribute(): 속성 제거

document.getElementById("title").removeAttribute("style");

---

✅ 4. 노드 복제

🔹 cloneNode(true | false): 노드 복사

let origin = document.getElementById("item");
let copy = origin.cloneNode(true); // true: 자식까지 복제
document.getElementById("list").appendChild(copy);

---

🧠 실전 예제: 버튼 클릭 시 항목 추가

<ul id="fruits">
  <li>🍎 사과</li>
</ul>
<button onclick="addFruit()">추가</button>

<script>
  function addFruit() {
    let ul = document.getElementById("fruits");
    let li = document.createElement("li");
    li.textContent = "🍌 바나나";
    ul.appendChild(li);
  }
</script>

---

📋 기능별 메소드 요약표

목적	메소드	설명
추가	appendChild()	마지막 자식으로 추가
	insertBefore()	특정 자식 앞에 삽입
생성	createElement()	새 HTML 요소 생성
	createTextNode()	텍스트 노드 생성
	createAttribute()	속성 노드 생성 후 부착
수정	insertData()	텍스트 노드에 문자열 삽입
삭제	removeChild()	특정 자식 노드 제거
	removeAttribute()	특정 속성 제거
복제	cloneNode(true | false)

---

✅ 마무리 요약

• createElement() + appendChild()는 동적 UI의 핵심입니다.
• insertBefore()는 원하는 위치 조작에 유용합니다.
• 노드 제거는 반드시 부모에서 자식을 기준으로 해야 합니다.
• cloneNode()를 활용하면 템플릿 반복도 쉽게 구현할 수 있습니다.