부모 노드로부터 시작하여 replaceChild()메서드를 사용한다.
| 메서드 | 설명 |
| document.replaceChild(새로운내용, 기존내용) | 자식 노드 수정하기 (요소노드, 텍스트 노드 가능) |
| element.textContent = 수정내용 | 해당 요소의 텍스트 노드 수정 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="p1">this is a paragraph.</p>
<p id="p2">this is another paragraph</p>
</div>
<script>
let parent = document.querySelector("#div1");
// 바꾸려는 요소의 부모
let child = document.querySelector("#p1");
// 바꾸려고 하는 요소
let para = document.createElement("p");
let node = document.createTextNode("this is new.");
para.appendChild(node);
// 새로운 요소
parent.replaceChild(para, child);
</script>
</body>
</html>
'웹 프로그래밍 기초 > DOM 문서객체' 카테고리의 다른 글
| HTML 요소(Noes) 삭제 (0) | 2025.04.13 |
|---|---|
| addEventListener 실습예제 (2) | 2025.04.11 |
| addEventListener (0) | 2025.04.11 |
| 이벤트 (1) | 2025.04.11 |
| document 컬렉션 (0) | 2025.04.11 |