Element: insertAdjacentHTML() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die insertAdjacentHTML()-Methode der Element-Schnittstelle parst den angegebenen Text als HTML oder XML und fügt die resultierenden Knoten an einer angegebenen Position in den DOM-Baum ein.

Syntax

js
insertAdjacentHTML(position, text)

Parameter

position

Ein String, der die Position relativ zum Element darstellt. Muss einer der folgenden Strings sein:

"beforebegin"

Vor dem Element. Nur gültig, wenn das Element sich im DOM-Baum befindet und ein übergeordnetes Element hat.

"afterbegin"

Direkt innerhalb des Elements, vor seinem ersten Kind.

"beforeend"

Direkt innerhalb des Elements, nach seinem letzten Kind.

"afterend"

Nach dem Element. Nur gültig, wenn das Element sich im DOM-Baum befindet und ein übergeordnetes Element hat.

text

Der String, der als HTML oder XML geparst und in den Baum eingefügt werden soll.

Rückgabewert

Keiner (undefined).

Ausnahmen

Diese Methode kann eine DOMException einer der folgenden Typen auslösen:

NoModificationAllowedError DOMException

Wird ausgelöst, wenn position "beforebegin" oder "afterend" ist und das Element entweder kein übergeordnetes Element hat oder dessen übergeordnetes Element das Document-Objekt ist.

SyntaxError DOMException

Wird ausgelöst, wenn position nicht einer der vier aufgelisteten Werte ist.

Beschreibung

Die insertAdjacentHTML()-Methode parst nicht erneut das Element, das verwendet wird, und beschädigt daher nicht die vorhandenen Elemente innerhalb dieses Elements. Dies vermeidet den zusätzlichen Schritt der Serialisierung, wodurch es viel schneller ist als die direkte Manipulation mit innerHTML.

Wir können die möglichen Positionen für den eingefügten Inhalt wie folgt visualisieren:

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Sicherheitshinweise

Beim Einfügen von HTML in eine Seite mit insertAdjacentHTML() sollten Sie darauf achten, keine Benutzereingaben zu verwenden, die nicht escaped wurden.

Sie sollten insertAdjacentHTML() nicht verwenden, um reinen Text einzufügen. Stattdessen sollten Sie die Node.textContent-Eigenschaft oder die Element.insertAdjacentText()-Methode verwenden. Diese interpretieren den übergebenen Inhalt nicht als HTML, sondern fügen ihn als rohen Text ein.

Beispiele

Einfügen von HTML

HTML

html
<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>

CSS

css
code {
  color: red;
}

JavaScript

js
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

Ergebnis

Spezifikationen

Specification
HTML Standard
# the-insertadjacenthtml()-method

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch