DOM 노드 추가 및 삭제하기: 웹 페이지 구조 조작 및 사용 예제

DOM 노드 추가 및 삭제하기: 웹 페이지 구조 조작 및 사용 예제

웹 개발에서 DOM(Document Object Model)을 이용해 웹 페이지의 구조와 내용을 조작하는 것은 매우 중요한 역할을 합니다. 이전 글에서는 DOM 노드 선택과 수정하는 방법에 대해서 알아보았습니다. 이번 글에서는 DOM 노드를 추가하고 삭제하는 방법에 대해 알아보겠습니다. DOM 노드의 생성, 추가, 복제 및 삭제에 관한 기본 개념과 실제 예제를 살펴봅시다.

▼ 노드 생성, 추가, 복제 및 삭제 메서드

메서드설명예제
createElement주어진 태그 이름을 가진 HTML 요소를 생성합니다.document.createElement(“p”)
createTextNode주어진 문자열을 가진 텍스트 노드를 생성합니다.document.createTextNode(“새로운 문단입니다.”)
cloneNode기존 노드를 복제합니다. 매개변수로 true를 전달하면 자식 노드까지 복제하고, false를 전달하면 현재 노드만 복제합니다.originalNode.cloneNode(true)
appendChild주어진 노드를 현재 노드의 마지막 자식 노드로 추가합니다.parentElement.appendChild(newElement)
removeChild주어진 노드를 부모 노드에서 삭제합니다.parentNode.removeChild(targetNode)

1. 노드 생성 및 추가하기

createElement와 createTextNode를 사용하여 새 노드를 생성한 후 appendChild 메서드를 사용하여 기존 요소에 추가할 수 있습니다.

1. 예제코드

<!DOCTYPE html>
<html>
<head>
     <title>DOM 노드 추가하기</title>
     <script>
     function addNode() {
     let newElement = document.createElement("p");
     let newText = document.createTextNode("새로운 문단입니다.");
     newElement.appendChild(newText);

     document.getElementById("content").appendChild(newElement);
     }
     </script>
</head>
<body>
     <div id="content"></div>
     <button onclick="addNode()">노드 추가</button>
</body>
</html>

2. 실행 결과 화면

노드 생성 및 추가하기 예제 실행 결과 화면입니다.

2. 노드 복제하기

cloneNode 메서드를 사용하여 기존 노드를 복제한 후 appendChild 메서드를 사용하여 기존 요소에 추가할 수 있습니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>DOM 노드 복제하기</title>
     <script>
     function clone_Node() {
     let originalNode = document.getElementById("original");
     let clonedNode = originalNode.cloneNode(true);
     document.getElementById("cloned").appendChild(clonedNode);
     }
     </script>
</head>
<body>
     <div id="content">
     <p id="original">이 노드를 복제하겠습니다.</p>
     </div>
     <div id="cloned">
     <p>복제된 노드:</p>
     </div>
     <button onclick="clone_Node()">노드 복제</button>
</body>
</html>

2. 실행 결과 화면

노드 복제하기 예제 실행 결과 화면입니다.

3. 노드 삭제하기

removeChild 메서드를 사용하여 기존 요소에서 노드를 삭제할 수 있습니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>DOM 노드 삭제하기</title>
     <script>
     function removeNode() {
     var targetNode = document.getElementById("target");
     targetNode.parentNode.removeChild(targetNode);
     }
     </script>
</head>
<body>
     <div id="content">
     <p id="target">이 노드를 삭제하겠습니다.</p>
     </div>
     <button onclick="removeNode()">노드 삭제</button>
</body>
</html>

2. 실행 결과 화면

노드 삭제하기 예제 코드 실행 결과 화면

함께 보면 좋은 게시물


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

동일 카테고리 게시글

위로 스크롤