JavaScript에서 자식 노드(child node)를 새로운 노드(new node)로 교체하려면 replaceChild() 메서드를 사용하면 됩니다. 이 작업을 수행하려면 먼저 새 노드를 생성한 뒤, replaceChild() 메서드를 호출하여 기존의 오래된 노드를 새 노드로 대체해야 합니다.
문법(Syntax)
node.replaceChild(newnode, oldnode);
replaceChild() 메서드는 두 개의 매개변수, 즉 새 노드(newnode)와 기존 노드(oldnode)를 받으며, 기존 노드를 새 노드로 교체합니다.
예제
다음 예제에서는 처음에 순서 없는 목록(ul)이 Boost, Horlicks, Maltova라는 세 개의 요소로 구성되어 있습니다. replaceChild() 메서드를 사용해 첫 번째 요소를 Bournavita로 교체하면, 실행 결과는 아래와 같이 Bournavita, Horlicks, Maltova 순서로 표시됩니다.
<html>
<body>
<ul id="List"><li>Boost</li><li>Horlicks</li><li>Maltova</li></ul>
<script>
var newnode = document.createTextNode("Bournavita");
var item = document.getElementById("List").childNodes[0];
item.replaceChild(newnode, item.childNodes[0]);
</script>
</body>
</html>
실행 결과
Bournavita
Horlicks
Maltova
참고 사항
childNodes는 요소 노드뿐만 아니라 공백이나 줄바꿈으로 인한 텍스트 노드까지 포함한다는 점에 유의해야 합니다. 따라서 HTML 코드의 들여쓰기나 줄바꿈에 따라 childNodes[0]가 의도한 요소가 아닐 수 있습니다. 보다 안전하게 특정 요소만 선택하려면 children 속성이나 querySelector()를 사용하는 것이 좋습니다.