HTML DOM replaceChild() 메서드
예시
목록의 <li> 요소에 있는 텍스트 노드를 새 텍스트 노드로 교체합니다.
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];
// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);
// Note: This example replaces only the Text node "Coffee" with a Text node "Water"
교체하기 전에:
- Coffee
- Tea
- Milk
교체 후:
- Water
- Tea
- Milk
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
replaceChild() 메서드는 자식 노드를 새 노드로 바꿉니다.
새 노드는 문서의 기존 노드이거나 새 노드를 만들 수 있습니다.
팁: removeChild() 메서드를 사용 하여 요소에서 자식 노드를 제거합니다.
브라우저 지원
Method | |||||
---|---|---|---|---|---|
replaceChild() | Yes | Yes | Yes | Yes | Yes |
통사론
node.replaceChild(newnode, oldnode)
매개변수 값
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
oldnode | Node object | Required. The node object you want to remove |
기술적 세부 사항
반환 값: | 교체된 노드를 나타내는 Node 객체 |
---|---|
DOM 버전 | 코어 레벨 1 노드 개체 |
더 많은 예
예시
목록의 <li> 요소를 새 <li> 요소로 교체합니다.
// Create a new <li> element
var elmnt = document.createElement("li");
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Append the text node to <li>
elmnt.appendChild(textnode);
// Get the <ul> element with id="myList"
var item = document.getElementById("myList");
// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);
// Note: This example replaces the entire <li> element
제거하기 전에:
- Coffee
- Tea
- Milk
제거 후:
- Water
- Tea
- Milk