HTML DOM Element replaceChild() 메서드

정의와 사용법

replaceChild() 메서드는 새 노드로 자식 노드를 대체합니다。

또한 참조하십시오：

removeChild() 메서드

remove() 메서드

appendChild() 메서드

insertBefore() 메서드

childNodes 속성

firstChild 속성

lastChild 속성

firstElementChild 속성

lastElementChild 속성

관련 문서 메서드：

createElement() 메서드

createTextNode() 메서드

예제

예제 1

새 텍스트 노드로 <li> 요소의 텍스트 노드를 대체합니다：

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

대체 전:

  • Coffee
  • Tea
  • Milk

대체된 후:

  • Water
  • Tea
  • Milk

직접 테스트해 보세요

예제 2

<li> 요소를 새로운 <li> 요소로 대체합니다：

// 새로운 <li> 요소를 생성합니다：
const element = document.createElement("li");
// 새로운 텍스트 노드를 생성합니다：
const textNode = document.createTextNode("Water");
// 텍스트 노드를 <li> 요소에 추가합니다：
element.appendChild(textNode);
// id="myList"의 <ul> 요소를 가져옵니다：
const list = document.getElementById("myList");
// 새로운 <li> 요소로 첫 번째 자식 노드를 대체합니다：
list.replaceChild(element, list.childNodes[0]);

대체 전:

  • Coffee
  • Tea
  • Milk

대체된 후:

  • Water
  • Tea
  • Milk

직접 테스트해 보세요

문법

node.replaceChild(newnode, oldnode)

파라미터

파라미터 설명
newnode 필수. 삽입할 노드.
oldnode 필수. 제거할 노드.

반환 값

타입 설명
Node 객체 대체된 노드.

브라우저 지원

element.replaceChild() DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완전히 지원합니다:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 9-11 지원 지원 지원 지원