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

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

Mary-Kate Olsen

Freigeben： 2024-11-05 07:13:02

Original

887 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Was einen gültigen JSON-String ausmacht: Ein tiefer Einblick in die Entwicklung von Standards Nächster Artikel：Wie kann ich eine HEX-Farbe programmgesteuert aufhellen oder abdunkeln, RGB-Farben verarbeiten und Farben miteinander mischen?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1761

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1901

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1623

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...