Wie füge ich HTML an das DOM an, ohne „div.innerHTML' zu verwenden?-js-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-11-05 02:29:02

Original

395 Leute haben es durchsucht

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);

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Ich habe versucht, von React.js zu Vue.js zu wechseln Nächster Artikel：Welche Methode eignet sich am besten zum Rendern von HTML in Bilder?

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

2054

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

2211

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

1865

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