지정된 위치에 엘레멘트를 삽입한다.

인수/파라메터
sLoc
필수적인 요소이며, 엘레멘트를 삽입할 위치를 나타내는 문자열이다.
beforeBegin 엘레멘트 oElem을 개체의 바로 전에 삽입한다.
afterBegin 엘레멘트 oElem을 개체가 시작되고 모든 다른 내용들 전에 삽입한다.
beforeEnd 엘레멘트 oElem을 개체가 종료되기 전에 모든 다른 내용들 다음에 삽입한다.
afterEnd 엘레멘트 oElem을 개체가 종료된 바로 다음에 삽입한다.
oElem
필수적인 요소이며, 삽입될 지정된 엘레멘트 개체이다.
반환값

반환값 oObj은 삽입된 엘레멘트 개체이다.

특기

문서가 로딩되는 동안에는 삽입할 수 없다.
이 메서드를 사용하기 위해서는 onload가 발생될 떄까지 기다려야 한다.

이미 문서에 존재하는 개체의 삽입을 시도하면, 새로운 개체가 생성되는 것이 아니고, 기존 개체는 insertAdjacentElement 메서드에서 지정하는 위치로 이동될 것이다.

적용
개체scriptIE
참조
innerHTML outerHTML innerText outerText
insertAdjacentElement insertAdjacentHTML insertAdjacentText

  1. 목록 항목 1
  2. 목록 항목 2
  3. 목록 항목 3

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>