[JavaScript] 노드 추가, 삭제하기

자바스크립트의 문서 객체 모델(DOM)에서 노드 추가 및 삭제하기 🌟

안녕하세요, 개발자 여러분! 오늘은 자바스크립트와 DOM을 사용하여 웹 페이지에 동적으로 요소를 추가하고 삭제하는 방법에 대해 살펴보겠습니다. 사용자의 상호작용에 따라 콘텐츠를 변경하고 싶을 때 이 기능들은 매우 유용합니다.

 

1. 🌱 노드(Node)란 무엇인가요?

노드는 HTML 문서의 구성 요소입니다. 요소 노드, 텍스트 노드, 주석 노드 등 다양한 유형의 노드가 있습니다. 이들을 조작함으로써 웹 페이지의 구조, 스타일 및 내용을 변경할 수 있습니다.

 

2. 📌 노드 추가하기

노드를 추가하는 가장 일반적인 방법은 createElement, createTextNode, 그리고 appendChild 메서드를 사용하는 것입니다.

• 예시: 새로운 요소 추가하기

// 새로운 요소 생성
var newElement = document.createElement("div");

// 새로운 텍스트 노드 생성
var newText = document.createTextNode("여기에 새로운 내용이 추가됩니다.");

// 텍스트 노드를 요소에 추가
newElement.appendChild(newText);

// 생성된 요소를 문서에 추가
document.body.appendChild(newElement);

 

3. 📍 노드 삭제하기

removeChild 메서드를 사용하여 원하는 노드를 삭제할 수 있습니다.

• 예시: 요소 삭제하기

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("childToRemove");

// 부모 요소에서 자식 요소 삭제
parentElement.removeChild(childElement);

 

4. 🔀 노드 교체하기

노드를 교체하고 싶을 때는 replaceChild 메서드를 사용합니다.

• 예시: 요소 교체하기

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
var oldElement = document.getElementById("childToReplace");

newElement.textContent = "새로운 요소입니다.";

// 기존 요소를 새 요소로 교체
parentElement.replaceChild(newElement, oldElement);

 

5. 🔄 노드 이동하기

노드를 다른 위치로 이동하려면 appendChild 또는 insertBefore 메서드를 사용할 수 있습니다.

• 예시: 요소 이동하기

var targetElement = document.getElementById("target");
var elementToMove = document.getElementById("toMove");

// 요소를 새로운 위치로 이동
targetElement.appendChild(elementToMove);

 

🌟 마치며...

DOM을 사용한 노드의 추가, 삭제, 교체, 이동 기능은 웹 페이지를 동적으로 만들기 위한 핵심 요소입니다. 이 기법들을 활용하여 사용자의 행동에 반응하는 생동감 있는 웹 페이지를 만들어보세요.

---

💻 Happy Interactive Coding! 💻

---

Reference:

JavaScript HTML DOM