replaceChild, replaceWith 자바스크립트 요소 교체

원본: https://www.tutorialspoint.com/replace-a-child-node-with-a-new-node-in-javascript

replaceChild() 메소드는 자식 노드를 새로운 노드로 대체하고 replaceWidh() 메소드는 선택된 노드를 다른 노드로 교체합니다. 이들 기능은 DOM Level 1의 기능이기 때문에 모든 최신 브라우저에서 작동합니다.

이해를 돕기 위해 이들 메소드의 문법과 사용 방법을 알아보겠습니다.

Table of Contents

자바스크립트 replaceChild

이 메소드는 선택된 부모 노드가 가지고 있는 노드를 새로운 노드로 교체하는 기능을 합니다.

문법

parentNode.replaceChild(newNode, oldNode);

매개변수

newNode: 이는 oldNode를 교체할 노드입니다. 만일 이 노드가 DOM의 다른 위치에 존재하고 있다면 노드를 그 위치에서 제거하여 교체하려 하는 위치로 이동시킵니다.
oldNode: 부모 노드에 존재하고 있는 노드입니다. 만약 이 노드가 DOM에 존재하지 않거나 선택된 부모 노드의 자식이 아니라면 이 메소드는 예외를 발생시킵니다.

리턴 값으로는 교체된 노드인 oldNode를 리턴합니다.

예제 1: 첫 번째 노드 교체

다음의 예제는 목록의 첫 번째 요소를 새 노드로 교체하는 코드입니다.

<!DOCTYPE html>
<html>

<body>
  <h3>Replace a child node with a new node</h3>
  <ul id="Cars">
    <li>Maruti</li>
    <li>Hyundai</li>
    <li>Toyota</li>
  </ul>
  <button onclick="replaceFunction()">Replace</button>
  <script>
    function replaceFunction() {
      const old1 = document.getElementById("Cars").children[0];
      const new1 = document.createTextNode("KIA");
      old1.replaceChild(new1, old1.childNodes[0]);
    }
  </script>
</body>

</html>

위의 예제를 실행하면 다음과 같은 화면을 볼 수 있습니다:

여기서 “Replace” 버튼을 누르면 다음과 같이 목록의 첫 번째 아이템이 교체되는 것을 확인할 수 있습니다:

위의 스크립트에서 버튼을 누르면 replaceFunction() 함수가 실행됩니다. 이는 getElementById() 메소드를 통해 목록 요소를 가져오고 이 목록의 첫 번째 요소를 old1에 저장했습니다. 그 다음 createTextNode() 메소드를 사용하여 new1 이라는 요소를 새로 생성하고 replaceChild() 메소드를 사용하여 old1의 노드를 new1으로 교체하였습니다.

예제 2: 마지막 노드 교체

이 예제에서는 목록의 마지막 노드를 새로운 노드로 교체합니다.

<!DOCTYPE html>
<html>

<body>
  <h3>Replace a child node with a new node</h3>
  <ul id="Cars">
    <li id="car1">Maruti</li>
    <li id="car2">Hyundai</li>
    <li id="car3">Toyota</li>
  </ul>
  <button onclick="replaceFunction()">Replace</button>
  <script>
    function replaceFunction() {
      const new1 = document.createElement("li");
      new1.appendChild(document.createTextNode("KIA"));
      const list = document.getElementById("Cars");
      const old1 = list.lastElementChild;
      const parent = old1.parentNode;
      parent.replaceChild(new1, old1);
    }
  </script>
</body>

</html>

위의 코드를 실행하면 다음과 같은 화면이 나타납니다:

이제 화면의 “Replace” 버튼을 누르면 다음과 같이 목록의 마지막 아이템이 교체되는 것을 확인할 수 있습니다:

이 예제에서는 <li> 요소를 새로 생성하고 이 요소의 자식으로 Text 노드를 추가한 후 목록의 마지막 요소를 가져와 replaceChild() 메소드를 사용하여 새로 생성한 노드와 교체했습니다.

자바스크립트 replaceWith

이 메소드는 선택된 노드를 새로운 노드를 교체합니다.

문법

element.replaceWith(param1, param2, ..., paramN);

매개변수로는 노드 또는 문자열 객체를 받습니다. 여기서 문자열 객체는 문자열에 해당하는 Text 노드로 변환됩니다.

예제: replaceWith 사용 방법

이번 예제에서는 선택된 노드를 새로운 노드로 대체하는 방법을 알아보겠습니다.

<!DOCTYPE html>
<html>

<body>
  <h3>Replace a child node with a new node</h3>
  <ul id="laptop">
    <li>Dell</li>
    <li>HP</li>
    <li>Lenovo</li>
    <li>ASUS</li>
  </ul>
  <button onclick="replaceFunction()">Replace</button>
  <script>
    function replaceFunction() {
      const old1 = document.getElementById("laptop").firstElementChild.childNodes[0];
      const new1 = document.createTextNode("Macbook");
      old1.replaceWith(new1);
    }
  </script>
</body>

</html>