Element.insertAdjacentHTML()

insertAdjacentHTML() metoda z Element interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni innerHTML manipulation.

Syntax

element.insertAdjacentHTML(position, text);

Parametry

position
A DOMString reprezentuje pozycję relatywną element-u musi być must be jeden z następujących ciągów:
  • 'beforebegin': przed element -em.
  • 'afterbegin': W środku element-u przed jego pierwszym dzieckiem.
  • 'beforeend': W środku elementu po jego ostatnim dziecku.
  • 'afterend': Po element-cie 
text
string analizuje HTML albo XML i włącza w drzewo.

Visualization of position names

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
Note: beforebegin i afterend pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.

Przykład:

// <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>

Notes

Security considerations

When inserting HTML into a page by using insertAdjacentHTML(), be careful not to use user input that hasn't been escaped.

It is not recommended you use insertAdjacentHTML() when inserting plain text; instead, use the Node.textContent property or the Element.insertAdjacentText() method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

Specification

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

Browser compatibility

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.

See also