Signatur
Beschreibung
Die Methode insertAdjacentHTML() der Schnittstelle Element parst die angegebene Eingabe als HTML oder XML und fügt die resultierenden Knoten an einer bestimmten Position in den DOM-Baum ein.
Die Methode insertAdjacentHTML() parst das Element, auf dem sie aufgerufen wird, nicht erneut und beschädigt daher nicht die bestehenden Elemente innerhalb dieses Elements. Dadurch entfällt der zusätzliche Serialisierungsschritt, was sie deutlich schneller macht als eine direkte Manipulation von innerHTML.
Wenn <p> das Element ist, lassen sich die möglichen Positionen für den eingefügten Inhalt "foo" wie folgt visualisieren:
Die Methode enthält keine spezielle Behandlung für <template>-Elemente. In den meisten Fällen sollten Entwickler insertAdjacentHTML() auf der content-Eigenschaft des Templates verwenden, anstatt die Kindknoten eines Template-Elements direkt zu manipulieren.
Sicherheitsüberlegungen
Die Methode führt keine Bereinigung durch, um XSS-unsichere Elemente wie <script> oder Event-Handler-Content-Attribute zu entfernen.
Wenn Sie HTML mit insertAdjacentHTML() in eine Seite einfügen, sollten Sie TrustedHTML-Objekte anstelle von Strings übergeben und Trusted Types mit der CSP-Direktive require-trusted-types-for erzwingen. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die Eingabe zu bereinigen und potenziell gefährliches Markup zu entfernen, bevor es eingefügt wird.
Die Methode Element.insertAdjacentText() oder Node.textContent sollte verwendet werden, wenn Sie wissen, dass der vom Benutzer bereitgestellte Inhalt reiner Text sein soll. Dadurch wird die Eingabe als Rohtext eingefügt, anstatt sie als HTML zu parsen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $position Pflicht | string | — | Ein String, der die Position relativ zum Element angibt. Muss einer der folgenden Werte sein: "beforebegin" (vor dem Element; nur gültig, wenn das Element im DOM-Baum ist und ein Elternelement besitzt), "afterbegin" (innerhalb des Elements, vor dem ersten Kindknoten), "beforeend" (innerhalb des Elements, nach dem letzten Kindknoten) oder "afterend" (nach dem Element; nur gültig, wenn das Element im DOM-Baum ist und ein Elternelement besitzt). |
| $input Pflicht | TrustedHTML | string | — | Eine TrustedHTML-Instanz oder ein String, der das zu parsende HTML oder XML definiert. |
Rückgabewert
undefined).Beispiele
Trusted Types Tinyfill
if (typeof trustedTypes === "undefined")
trustedTypes = { createPolicy: (n, rules) => rules };Policy und TrustedHTML erzeugen
const policy = trustedTypes.createPolicy("some-content-policy", {
createHTML(input) {
return input; // Do not do this in your own code!
// Instead do something like:
// return DOMPurify.sanitize(input);
},
});
const unsafeText = "<strong>inserted text</strong>";
const trustedHTML = policy.createHTML(unsafeText);Einfügen an ausgewählter Position
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
const subject = document.querySelector("#subject");
const positionSelect = document.querySelector("#position");
subject.insertAdjacentHTML(positionSelect.value, trustedHTML);
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
document.location.reload();
});