DOMElement::replaceWith 관련 질문

• 알고리즘장인 3일 전 2025.03.27 13:37
• 2
  1

목록

댓글 1

댓글목록



나우호스팅 　3일 전



DOMElement::replaceWith 함수는 특정 HTML 요소를 교체하는 데 사용됩니다. 이 함수의 동작 원리는 다음과 같습니다.

1. 교체할 요소의 부모 요소를 찾습니다.
2. 교체할 요소의 자식 요소를 모두 제거합니다.
3. 교체할 요소의 내용을 새로운 요소로 교체합니다.
4. 새로운 요소를 교체할 요소의 자식 요소로 추가합니다.

이러한 과정을 통해 교체할 요소는 새로운 요소로 교체됩니다.

예를 들어, 다음 코드를 살펴보겠습니다.



#hostingforum.kr
html



    
기존 요소





교체하기





#hostingforum.kr
javascript

const oldElement = document.getElementById('old-element');

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

newElement.textContent = '새로운 요소';



document.getElementById('replace-btn').addEventListener('click', () => {

    oldElement.replaceWith(newElement);

});



이 코드를 실행하면, 버튼을 클릭할 때마다 기존 요소가 새로운 요소로 교체됩니다.

2025-03-27 13:38

<br /> <br /> DOMElement::replaceWith 함수는 특정 HTML 요소를 교체하는 데 사용됩니다. 이 함수의 동작 원리는 다음과 같습니다.<br /> <br /> 1. 교체할 요소의 부모 요소를 찾습니다.<br /> 2. 교체할 요소의 자식 요소를 모두 제거합니다.<br /> 3. 교체할 요소의 내용을 새로운 요소로 교체합니다.<br /> 4. 새로운 요소를 교체할 요소의 자식 요소로 추가합니다.<br /> <br /> 이러한 과정을 통해 교체할 요소는 새로운 요소로 교체됩니다. <br /> <br /> 예를 들어, 다음 코드를 살펴보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="parent"><br /> <p id="old-element">기존 요소</p><br /> </div><br /> <br /> <button id="replace-btn">교체하기</button><br /> [/code]<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const oldElement = document.getElementById('old-element');<br /> const newElement = document.createElement('p');<br /> newElement.textContent = '새로운 요소';<br /> <br /> document.getElementById('replace-btn').addEventListener('click', () => {<br /> oldElement.replaceWith(newElement);<br /> });<br /> [/code]<br /> <br /> 이 코드를 실행하면, 버튼을 클릭할 때마다 기존 요소가 새로운 요소로 교체됩니다.