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
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 dasDocument
-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:
<!-- 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
<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
Spezifikationen
Specification |
---|
HTML Standard # the-insertadjacenthtml()-method |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
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.