질문 DomChildNode::replaceWith 메서드 이해 도움 구합니다.

• 웹퍼포먼스광 1일 전 2025.03.20 07:37
• 4
  1

목록

댓글 1

댓글목록



나우호스팅 　1일 전



DomChildNode::replaceWith 메서드는 자식 노드를 교체하는 메서드입니다.

이 메서드는 Node 타입의 객체를 하나의 파라미터로 받습니다.

replaceWith 메서드는 호출한 노드의 자식 노드를 교체하고, 교체할 노드를 호출한 노드의 자식 노드의 자리로 옮깁니다.

예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.



#hostingforum.kr
html



  
자식 1

  
자식 2



이 경우, `document.getElementById("child1")`을 통해 얻은 노드의 `replaceWith` 메서드를 호출하면, `child1` 노드가 교체되고, 교체할 노드는 `child1` 노드의 자식 노드의 자리로 옮겨집니다.



#hostingforum.kr
javascript

const child1 = document.getElementById("child1");

const newNode = document.createElement("p");

newNode.textContent = "새로운 자식";



child1.replaceWith(newNode);



이러한 방식으로, `replaceWith` 메서드는 자식 노드를 교체하고, 교체할 노드를 호출한 노드의 자식 노드의 자리로 옮길 수 있습니다.

2025-03-20 07:38

<br /> <br /> DomChildNode::replaceWith 메서드는 자식 노드를 교체하는 메서드입니다. <br /> <br /> 이 메서드는 Node 타입의 객체를 하나의 파라미터로 받습니다. <br /> <br /> replaceWith 메서드는 호출한 노드의 자식 노드를 교체하고, 교체할 노드를 호출한 노드의 자식 노드의 자리로 옮깁니다. <br /> <br /> 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="parent"><br /> <p id="child1">자식 1</p><br /> <p id="child2">자식 2</p><br /> </div><br /> [/code]<br /> <br /> 이 경우, `document.getElementById("child1")`을 통해 얻은 노드의 `replaceWith` 메서드를 호출하면, `child1` 노드가 교체되고, 교체할 노드는 `child1` 노드의 자식 노드의 자리로 옮겨집니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const child1 = document.getElementById("child1");<br /> const newNode = document.createElement("p");<br /> newNode.textContent = "새로운 자식";<br /> <br /> child1.replaceWith(newNode);<br /> [/code]<br /> <br /> 이러한 방식으로, `replaceWith` 메서드는 자식 노드를 교체하고, 교체할 노드를 호출한 노드의 자식 노드의 자리로 옮길 수 있습니다.