Element: insertAdjacentHTML() Methode

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.

Keiner (undefined).

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.

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:

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

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.

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

code {
  color: red;
}

JavaScript

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

• Element.insertAdjacentElement()
• Element.insertAdjacentText()
• XMLSerializer: Serialisiert einen DOM-Baum in einen XML-String
• hacks.mozilla.org Gastbeitrag von Henri Sivonen, einschließlich eines Benchmarks, der zeigt, dass insertAdjacentHTML in einigen Fällen deutlich schneller sein kann.