이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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 Status Comment
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Working Draft  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Full support 1Edge Full support 18
Full support 18
Full support 12
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Full support 8IE Full support 4
Notes
Full support 4
Notes
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Full support 7Safari Full support 10WebView Android Full support 2.3Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support YesSafari iOS Full support 4Samsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, DeadIntegral, dragonist
최종 변경자: alattalatta,