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

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