8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체
여러분은 다음과 같은 형식으로 기존의 노드를 새로운 노드로 바꿀 수 있는데 기존의 노드를 새로운 노드로 바꾸기 위해서는 기준점이 있어야 되는데 바꾸려는 노드의 부모노드에서 replaceChild() 메서드를 사용하면 됩니다.
부모노드.replaceChild(newNode, oldNode)
간단하게 replaceChild() 메서드를 이용하여 기존의 노드를 교체하는 방법에 대해서 알아봅니다. 메모장을 열어서 다음과 같이 body 요소 안에 1개의 p 요소로 이루어진 HTML
문서를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title> replaceChild() 메서드
예제 </title>
</head>
<body id ="body_id">
<p id="person">링컨</p>
</body>
</html>
작성이 끝났으면 “replaceChildMethod.html”로 저장하고 IE9를 통해서 확인하면 “링컨”이라는
문자열만 나타나게 됩니다. 이제 replaceChild() 메서드를
이용하여 Text 값이 “링컨”인 p 요소 노드를 Text 값이
“정약용”인 p 요소로
교체해봅니다. 이를 위해서 </p> 마침 태그
다음 라인에 아래와 같이 코드를 작성합니다.
<script
type="text/javascript">
var newNode =
document.createElement("p");
var newText =
document.createTextNode("정약용");
newNode.appendChild(newText);
var parentNode = document.getElementById("body_id");
var oldNode =
document.getElementById("person");
var replaceNode =
parentNode.replaceChild(newNode,oldNode);
document.write("원래의 node의 Text 값 :
" + oldNode.innerHTML);
</script>
저장한 후 IE9를 통해 확인하면 다음과 같이 기존의
Text 값이 “링컨”인 p 요소가 Text 값이 “정약용”인 p 요소로 교체되어 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 (0) | 2013.08.06 |
|---|---|
| 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 (0) | 2013.08.06 |
| 8. DOM(Document Object Model) (0) | 2013.08.06 |
| 7.2 Event Method를 이용한 이벤트 처리 (0) | 2013.08.06 |
| 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
