엘레멘트를 문서 계통도에 모체 개체의 자식노드(node)로 삽입한다.

인수/파라메터
oNewNode
필수적인 요소이며, 문서의 계통도에 삽입될 새로운 엘레멘트를 지정하는 개체이다.
이는 createElement 메서드에 의하여 생성될 수 있는 엘레멘트들이다.
oChildNode
선택적인 요소이며, 새로운 엘레멘트가 위치할 자리를 지정하는 개체이다.
만일 이 파라메터가 지정되지 않으면, 새로운 엘레멘트는 현재의 자식 엘레멘트 바로 이전에 삽입된다.
반환값

반환값 oVal은 문서에 새로이 삽입된 엘레멘트의 참조를 반환한다.

특기

일차 자식 노드를 삽입할 때는 oChildNode 파라메터를 지정하지 말라. 자식노드가 이미 있고, oChildNode파라메터를 지정하지 않으면 oNewNode는 모체 개체의 마지막 자식이 된다.

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

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

적용
개체scriptIE
참조
(영문)DOM(W3C Document Object Model)

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


클릭하여 목록 항목을 추가한다.

새로운 항목 엘레멘트를 생성하여 기존 목록의 세번째 항목 앞에 insertBefore 메서드로 삽입한다.

<SCRIPT>
function insertElement(){
  var nod=document.createElement('LI');
  ulObj.insertBefore(nod,oLi3);
  nod.innerText='토마토';
}
</SCRIPT>

<SPAN onclick=insertElement() style="border:solid 1 blue;background:ffa">클릭하여 목록 항목을 추가한다.</SPAN>
<UL id="ulObj">
<LI id="oLi1">사과</LI>
<LI id="oLi2">장미</LI>
<LI id="oLi3">복숭아</LI>
</UL>