기존의 자식 엘레멘트를 새로운 자식 엘레멘트로 교체한다.

인수/파라메터
oNewNode
필수적인 요소이며, 문서에 삽입할 새로운 엘레멘트를 지정하는 개체이다.

oChildNode
필수적인 요소이며, 교체당할 기존의 엘레멘트를 지정하는 개체이다.

반환값

반환값 oVal는 교체된 개체를 참조한다.

특기

교체될 노드(node)는 모체의 직접적인 자식이어야 한다.
새로운 노드는 createElement 메서드를 사용하여 생성하여야 한다.

이 메서드는 런타임(run time)에 접속할 수 있다. 런타임에서 이 엘레멘트가 종료태그가 파싱되기 전에 제거되면, 문서의 지역들은 표현되지 않을 수 있다.

IE6에서는 이 메서드가 attribute개체도 적용된다.

적용
A ACRONYM ADDRESS attribute B BDO BIG BLOCKQUOTE BODY BUTTON CAPTION CENTER CITE CODE COL COLGROUP COMMENT DD DEL DFN DIR DIV DL DT EM FIELDSET FONT FORM FRAMESET HEAD hn HTML I IFRAME INPUT type=button INPUT type=checkbox INPUT type=file INPUT type=hidden INPUT type=image INPUT type=password INPUT type=radio INPUT type=reset INPUT type=submit INPUT type=text INS KBD LABEL LEGEND LI LISTING MAP MARQUEE MENU nextID OL OPTION P PLAINTEXT PRE Q S SAMP SELECT SMALL SPAN STRIKE STRONG SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TR TT U UL VAR XMP
참조
createElement

이 메서드는 (영문)DOM1(W3C Document Object Model Level 1)에서 정의되었다.


여기를 클릭하면 엘레멘트가 교체된다.
Div1.children[0].nodeName=

replaceChild 메서드로 div 속의 자식 엘레멘트를 b와 i 두 엘레멘로 교체한다.

<HEAD>
<SCRIPT>
function replaceElement(){
  var oChild=Div1.children(0);
  var textObj = oChild.innerHTML;
  if (oChild.tagName=='B'){
    oNewChild=document.createElement('I');
    Div1.replaceChild(oNewChild,oChild);
    oNewChild.innerHTML=textObj
  } else {
    oNewChild=document.createElement('B');
    Div1.replaceChild(oNewChild,oChild);
    oNewChild.innerHTML=textObj
  }
  showA.innerHTML=Div1.children[0].nodeName;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=Div1 onclick="replaceElement()" style="border:solid 1 blue">여기를 클릭하면 <B>엘레멘트</B>가 교체된다.</DIV>
<DIV>Div1.children[0].nodeName=<B><SPAN id=showA>
<SCRIPT>document.write(Div1.children[0].nodeName)</SCRIPT>
</SPAN></B></DIV>
</BODY>