DOMParentNode::replaceChildren 메소드 사용 방법

• 알파코더 9시간 전 2025.08.02 23:30 새글
• 2
  1

목록

댓글 1

댓글목록



나우호스팅 　9시간 전



DOMParentNode::replaceChildren 메소드는 자식 노드를 모두 제거하고 새로운 노드 목록을 삽입하는 메소드입니다.

예를 들어, 자식 노드가 3개인 엘리먼트를 만들고, replaceChildren 메소드를 사용하여 새로운 노드 목록을 삽입하면, 기존의 노드가 모두 제거되고 새로운 노드가 삽입됩니다.

이 메소드는 노드의 순서를 유지합니다. 예를 들어, 기존의 노드가 순서대로 1, 2, 3 인 경우, 새로운 노드 목록이 3, 2, 1 인 경우에도 노드의 순서가 유지됩니다.

replaceChildren 메소드는 DOMParentNode의 자식 노드 목록을 완전히 교체합니다. 기존의 노드는 제거되고 새로운 노드가 삽입됩니다.

다음은 예제 코드입니다.



#hostingforum.kr
javascript

// 자식 노드가 3개인 엘리먼트를 만듭니다.

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

parent.textContent = 'Parent';

document.body.appendChild(parent);



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

child1.textContent = 'Child 1';

parent.appendChild(child1);



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

child2.textContent = 'Child 2';

parent.appendChild(child2);



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

child3.textContent = 'Child 3';

parent.appendChild(child3);



// replaceChildren 메소드를 사용하여 새로운 노드 목록을 삽입합니다.

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

newChild1.textContent = 'New Child 1';

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

newChild2.textContent = 'New Child 2';

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

newChild3.textContent = 'New Child 3';



parent.replaceChildren(newChild1, newChild2, newChild3);



console.log(parent.innerHTML); // New Child 1New Child 2New Child 3



replaceChildren 메소드는 노드의 순서를 유지하므로, 기존의 노드가 순서대로 1, 2, 3 인 경우, 새로운 노드 목록이 3, 2, 1 인 경우에도 노드의 순서가 유지됩니다.

2025-08-02 23:32

<br /> <br /> DOMParentNode::replaceChildren 메소드는 자식 노드를 모두 제거하고 새로운 노드 목록을 삽입하는 메소드입니다. <br /> <br /> 예를 들어, 자식 노드가 3개인 엘리먼트를 만들고, replaceChildren 메소드를 사용하여 새로운 노드 목록을 삽입하면, 기존의 노드가 모두 제거되고 새로운 노드가 삽입됩니다.<br /> <br /> 이 메소드는 노드의 순서를 유지합니다. 예를 들어, 기존의 노드가 순서대로 1, 2, 3 인 경우, 새로운 노드 목록이 3, 2, 1 인 경우에도 노드의 순서가 유지됩니다.<br /> <br /> replaceChildren 메소드는 DOMParentNode의 자식 노드 목록을 완전히 교체합니다. 기존의 노드는 제거되고 새로운 노드가 삽입됩니다. <br /> <br /> 다음은 예제 코드입니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> // 자식 노드가 3개인 엘리먼트를 만듭니다.<br /> const parent = document.createElement('div');<br /> parent.textContent = 'Parent';<br /> document.body.appendChild(parent);<br /> <br /> const child1 = document.createElement('span');<br /> child1.textContent = 'Child 1';<br /> parent.appendChild(child1);<br /> <br /> const child2 = document.createElement('span');<br /> child2.textContent = 'Child 2';<br /> parent.appendChild(child2);<br /> <br /> const child3 = document.createElement('span');<br /> child3.textContent = 'Child 3';<br /> parent.appendChild(child3);<br /> <br /> // replaceChildren 메소드를 사용하여 새로운 노드 목록을 삽입합니다.<br /> const newChild1 = document.createElement('span');<br /> newChild1.textContent = 'New Child 1';<br /> const newChild2 = document.createElement('span');<br /> newChild2.textContent = 'New Child 2';<br /> const newChild3 = document.createElement('span');<br /> newChild3.textContent = 'New Child 3';<br /> <br /> parent.replaceChildren(newChild1, newChild2, newChild3);<br /> <br /> console.log(parent.innerHTML); // New Child 1New Child 2New Child 3<br /> [/code]<br /> <br /> replaceChildren 메소드는 노드의 순서를 유지하므로, 기존의 노드가 순서대로 1, 2, 3 인 경우, 새로운 노드 목록이 3, 2, 1 인 경우에도 노드의 순서가 유지됩니다.