From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../web/api/element/insertadjacenthtml/index.html | 144 +++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/de/web/api/element/insertadjacenthtml/index.html (limited to 'files/de/web/api/element/insertadjacenthtml/index.html') diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..14f05ca474 --- /dev/null +++ b/files/de/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - .textContent() + - Geschwindigkeitsvorteil + - HTML einfügen + - Méthode + - Referenz +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

insertAdjacentHTML() interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.
+ Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer innerHTML Manipulation ergibt.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

position beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:

+ +
+
'beforebegin'
+
Vor dem element selbst.
+
'afterbegin'
+
Innerhalb des element, direkt vor dessen erstem Kind-Objekt. 
+
'beforeend'
+
Innerhalb des element, direkt nach dessen letztem Kind-Objekt.
+
'afterend'
+
Nach dem element selbst.
+
+ +

text ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.

+ +

Verdeutlichung der position Bezeichner

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Hinweis: Die beforebegin und afterend Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. 
+ +

Beispiel

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Danach sieht die neue Struktur so aus:
+// <div id="one">one</div><div id="two">two</div>
+ +

Anmerkungen

+ +

Sicherheitsaspekte

+ +

Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). 

+ +

Für das Einfügen reinen Texts sollte statt insertAdjacentHTML besser node.textContent benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
BeschreibungStatusKommentar
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
grundsätzlich
+ unterstützt		1.0{{ CompatGeckoDesktop("8.0") }}4.07.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
grundsätzlich
+ unterstützt		{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf