지정된 위치에 엘레멘트를 삽입한다.
| beforeBegin | 엘레멘트 oElem을 개체의 바로 전에 삽입한다. |
| afterBegin | 엘레멘트 oElem을 개체가 시작되고 모든 다른 내용들 전에 삽입한다. |
| beforeEnd | 엘레멘트 oElem을 개체가 종료되기 전에 모든 다른 내용들 다음에 삽입한다. |
| afterEnd | 엘레멘트 oElem을 개체가 종료된 바로 다음에 삽입한다. |
반환값 oObj은 삽입된 엘레멘트 개체이다.
문서가 로딩되는 동안에는 삽입할 수 없다.
이 메서드를 사용하기 위해서는 onload가 발생될 떄까지 기다려야 한다.
이미 문서에 존재하는 개체의 삽입을 시도하면, 새로운 개체가 생성되는 것이 아니고, 기존 개체는 insertAdjacentElement 메서드에서 지정하는 위치로 이동될 것이다.
| 개체 | script | IE |
|---|
insertAdjacentElement 메서드를 사용하여 ol 개체에 새로운 목록 항목을 10개까지 삽입한다.
<HTML>
<HEAD>
<SCRIPT>
function doAdd(job){
if (oList.children.length<10){
var newObj=document.createElement('LI');
if (job=='afterEnd') idx=oList.children.length-1;
else idx=0;
oList.children(idx).insertAdjacentElement(job,newObj);
newObj.innerText='새 항목 '+oList.children.length;
}
showA.innerHTML='oList.children.length='+oList.children.length;
}
</SCRIPT>
</HEAD>
<BODY>
<OL id="oList">
<LI>목록 항목 1</LI>
<LI>목록 항목 2</LI>
<LI>목록 항목 3</LI>
</OL>
<BUTTON onclick="doAdd('BeforeBegin')">삽입(BeforeBegin)</BUTTON>
<BUTTON onclick="doAdd('afterEnd')">삽입(afterEnd)</BUTTON>
<DIV id=showA></DIV>
</BODY>
</HTML>