suchen

Heim >Web-Frontend >js-Tutorial >Wie füge ich HTML an das DOM an, ohne „div.innerHTML' zu verwenden?

Wie füge ich HTML an das DOM an, ohne „div.innerHTML' zu verwenden?

Linda Hamilton
Linda HamiltonOriginal
2024-11-05 02:29:02446Durchsuche

How to Append HTML to the DOM Without Using `div.innerHTML`?

HTML an das DOM anhängen, ohne div.innerHTML zu verwenden

Beim Versuch, eine HTML-Zeichenfolge an das DOM anzuhängen, scheint der typische Ansatz div.innerHTML = str zu sein Dies ist praktisch, wird aber aufgrund möglicher Sicherheitsrisiken oft nicht empfohlen. In dieser Frage wird eine alternative Lösung zum Anhängen von HTML-Zeichenfolgen an ein bestimmtes Element untersucht.

In diesem Szenario besteht die Aufgabe darin, die HTML-Zeichenfolge

Nur etwas Text anzuhängen. hier

zum
Element mit dem ID-Test. Um dies zu erreichen, besteht der bevorzugte Ansatz darin, die von allen modernen Browsern unterstützte Methode insertAdjacentHTML zu nutzen.

So wird es gemacht:

div.insertAdjacentHTML('beforeend', str);

Die Methode insertAdjacentHTML benötigt zwei Parameter:

  • Position: Gibt an, wo der HTML-Inhalt innerhalb des Zielelements eingefügt werden soll. In diesem Fall fügt beforeend den Inhalt innerhalb des Elements nach seinem letzten untergeordneten Element hinzu.
  • HTMLString: Die einzufügende HTML-Zeichenfolge.

Mit div.insertAdjacentHTML('beforeend', str) stellt sicher, dass die HTML-Zeichenfolge innerhalb des

angehängt wird. Element, das die DOM-Struktur beibehält und gleichzeitig die potenziellen Sicherheitsbedenken im Zusammenhang mit der Verwendung von innerHTML vermeidet.

Eine Live-Demonstration dieser Lösung finden Sie hier: http://jsfiddle.net/euQ5n/

Das obige ist der detaillierte Inhalt vonWie füge ich HTML an das DOM an, ohne „div.innerHTML' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html String for while using append dom this 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：Ich habe versucht, von React.js zu Vue.js zu wechselnNächster Artikel：Ich habe versucht, von React.js zu Vue.js zu wechseln

In Verbindung stehende Artikel

Mehr sehen