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

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

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse