suchen

Heim >Web-Frontend >js-Tutorial >Wie hänge ich HTML-Strings sicher an das DOM an, ohne „div.innerHTML = str;' zu verwenden?

Wie hänge ich HTML-Strings sicher an das DOM an, ohne „div.innerHTML = str;' zu verwenden?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-05 07:13:02981Durchsuche

How to Safely Append HTML Strings to the DOM Without Using `div.innerHTML = str;`?

HTML-Strings an das DOM anhängen, ohne div.innerHTML

Beim Anhängen von HTML-Strings an das DOM mit div.innerHTML = str; mag praktisch sein, aufgrund von Sicherheitslücken wird jedoch davon abgeraten. Ein sichererer und robusterer Ansatz ist die Verwendung der Methode insertAdjacentHTML().

Verwendung von insertAdjacentHTML()

insertAdjacentHTML() bietet eine standardisierte Möglichkeit, HTML-Zeichenfolgen in die einzufügen DOM. Es werden zwei Parameter benötigt:

  • position: Gibt an, wo der HTML-Code relativ zum Zielelement eingefügt werden soll. Kann „beforebegin“, „afterbegin“, „beforeend“ oder „afterend“ sein.
  • html: Die einzufügende HTML-Zeichenfolge.

In Ihrem Fall, um die bereitgestellte HTML-Zeichenfolge an das

anzuhängen. Mit der ID „test“ können Sie den folgenden Code verwenden:

<code class="javascript">const div = document.getElementById("test");
div.insertAdjacentHTML("beforeend", str);</code>

Die „beforeend“-Position fügt den HTML-Code innerhalb des

nach seinem letzten untergeordneten Element ein.

Browserkompatibilität

insertAdjacentHTML() wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Live-Demo

Für eine Demonstration besuchen Sie das folgende JSFiddle: http://jsfiddle.net/euQ5n/

Das obige ist der detaillierte Inhalt vonWie hänge ich HTML-Strings sicher an das DOM an, ohne „div.innerHTML = str;' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

firefox chrome safari html edge String using append dom innerHTML position http
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was einen gültigen JSON-String ausmacht: Ein tiefer Einblick in die Entwicklung von StandardsNächster Artikel：Was einen gültigen JSON-String ausmacht: Ein tiefer Einblick in die Entwicklung von Standards

In Verbindung stehende Artikel

Mehr sehen