Element.insertAdjacentHTML()

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

insertAdjacentHTML() 는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다.  이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.

구문

element.insertAdjacentHTML(position, text);

position은 아래 있는 단어만 사용 가능하다.

'beforebegin'
element 앞에 
'afterbegin'
element 안에 가장 첫번째 child
'beforeend'
element 안에 가장 마지막 child
'afterend'
element 뒤에

text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.

position 의 예시 그림

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Note:  beforebegin , afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.

예시

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Specification

Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0* 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 8.0 (8.0) ? ? ?

 

IE Issue:

  • IE8에서 DOM에 대한 변경은 JavaScript가 끝난 이후에만 만들어진다. 그렇기 때문에 만약 생성한 노드에 접근해야 하는 경우 비동기 방식을 사용해야 한다.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: DeadIntegral, dragonist
 최종 변경: DeadIntegral,