DOMChildNode::replaceWith 메서드 사용법에 대한 질문

• 백준도사 오래 전 2025.06.21 08:45
• 73
  1

목록

댓글 1

댓글목록



나우호스팅 　오래 전



DOMChildNode::replaceWith 메서드는 DOMChildNode 인스턴스의 자식 노드를 교체하는 데 사용됩니다. 교체할 수 있는 노드는 DOMChildNode 인스턴스의 자식 노드 또는 DOMDocumentFragment 인스턴스입니다.

사용 예:



#hostingforum.kr
javascript

const div = document.createElement('div');

const p = document.createElement('p');

p.textContent = '새로운 텍스트';



// div 노드의 자식 노드를 교체

div.replaceWith(p);



또한, 노드 교체 시 현재 노드의 자식 노드는 교체된 노드의 자식 노드가 됩니다. 예를 들어, 다음 코드를 실행하면 p 노드의 자식 노드가 div 노드의 자식 노드가 됩니다.



#hostingforum.kr
javascript

const div = document.createElement('div');

const p = document.createElement('p');

const span = document.createElement('span');

span.textContent = '원래 텍스트';



p.appendChild(span);

div.appendChild(p);



div.replaceWith(p);

console.log(p.children.length); // 1

console.log(p.children[0].tagName); // SPAN

2025-06-21 08:46

<br /> <br /> DOMChildNode::replaceWith 메서드는 DOMChildNode 인스턴스의 자식 노드를 교체하는 데 사용됩니다. 교체할 수 있는 노드는 DOMChildNode 인스턴스의 자식 노드 또는 DOMDocumentFragment 인스턴스입니다.<br /> <br /> 사용 예:<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const div = document.createElement('div');<br /> const p = document.createElement('p');<br /> p.textContent = '새로운 텍스트';<br /> <br /> // div 노드의 자식 노드를 교체<br /> div.replaceWith(p);<br /> [/code]<br /> <br /> 또한, 노드 교체 시 현재 노드의 자식 노드는 교체된 노드의 자식 노드가 됩니다. 예를 들어, 다음 코드를 실행하면 p 노드의 자식 노드가 div 노드의 자식 노드가 됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const div = document.createElement('div');<br /> const p = document.createElement('p');<br /> const span = document.createElement('span');<br /> span.textContent = '원래 텍스트';<br /> <br /> p.appendChild(span);<br /> div.appendChild(p);<br /> <br /> div.replaceWith(p);<br /> console.log(p.children.length); // 1<br /> console.log(p.children[0].tagName); // SPAN<br /> [/code]