[DOM_Element] JS - replaceChild() 메서드 - 자식노드 대체 (= replaceChild메서드 = 리플레이스차일드 메서드)

1. replaceChild() 예제 - 자식노드 대체
2. replaceChild() 정의
3. replaceChild() 구문
4. replaceChild() 예제 - 기존 <li> 요소를 새 <li> 요소로 대체

replaceChild() 예제 - 자식노드 대체

 

<ul id="hz"><li>홈짱닷컴</li><li>홈페이지제작</li><li>서버관리</li></ul>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var text = document.createTextNode("Homzzang.com");

  var list = document.getElementById("hz").childNodes[0];

  list.replaceChild(text, list.childNodes[0]);

}

</script>

 

결과보기 (홈짱닷컴 → Homzzang.com)

replaceChild() 정의

 

자식노드를 새 노드로 대체.

 

---

 

1.

새 노드는 문서의 기존 노드이거나 새 노드 생성 가능.

 

2. cf.

removeChild() 메서드 - 요소에서 자식노드 제거

 

3.

• 모든 브라우저 지원.
• Core Level 1 Node Object

 

replaceChild() 구문

 

node.replaceChild(newnode, oldnode)

 

---

[매개변수]

 

newnode

필수. 새 노드 지정. (node type)

 

oldnode

필수. 제거할 노드 지정. (node type)

 

---

[반환값]

 

대체된 노드를 나타내는 노드 객체 반환.

 

replaceChild() 예제 - 기존 <li> 요소를 새 <li> 요소로 대체

 

<ul id="hz"><li>HTML</li><li>CSS</li><li>JS</li></ul>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var emt = document.createElement("li");

  var txt = document.createTextNode("JavaScript");

  emt.appendChild(txt);

  var hz = document.getElementById("hz");

  hz.replaceChild(emt, hz.childNodes[2]);

}

</script>

 

결과보기 (JS → JavaScript)

---

[주의] - 아래처럼 줄바꿈 되어 있으면, 엉뚱한 곳이 바뀜.

(∵ 공백도 하나의 노드로 간주)

 

<ul id="hz">

    <li>HTML</li><li>CSS</li><li>JS</li>

</ul>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var emt = document.createElement("li");

  var txt = document.createTextNode("JavaScript");

  emt.appendChild(txt);

  var hz = document.getElementById("hz");

  hz.replaceChild(emt, hz.childNodes[2]);

}

</script>

 

결과보기 (CSS → JavaScript)