Wie füge ich Text ohne Datenverlust an ein „'-Element hinzu?

Text an ein <div> anhängen Element ohne Datenverlust

Bei Verwendung von AJAX zum Ändern eines <div> Beim Erstellen des Inhalts des Elements ist es wichtig sicherzustellen, dass neue Daten den vorhandenen Inhalt nicht überschreiben. Hier ist eine Lösung für dieses Problem:

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

Dieser Code hängt neuen Text an den vorhandenen Inhalt des <div> an. Element. Die innerHTML-Eigenschaft enthält den gesamten HTML-Inhalt des Elements. Durch die Verwendung des =-Operators ergänzen wir den vorhandenen Inhalt, anstatt ihn zu ersetzen.

Erklärung:

Die getElementById-Methode gibt einen Verweis auf das <div> zurück. Element mit der angegebenen ID („divID“). Die innerHTML-Eigenschaft enthält den HTML-Inhalt innerhalb dieses Elements.

Der =-Operator hängt die Zeichenfolge „Extra stuff“ an das Ende der innerHTML-Eigenschaft an. Dadurch wird der neue Text effektiv zum vorhandenen Inhalt hinzugefügt, ohne ihn zu löschen.

Beispiel:

Betrachten Sie ein <div> Element mit der ID „dataDiv“:

<div>

Wenn wir den JavaScript-Code ausführen:

var div = document.getElementById('dataDiv');
div.innerHTML += 'New Data';

Der resultierende HTML-Inhalt des <div> Element wird sein:

<div>

Mit diesem Ansatz können Sie den Inhalt eines <div>-Elements nahtlos aktualisieren. Element mit neuen Daten, ohne vorhandene Inhalte zu verlieren.

Das obige ist der detaillierte Inhalt vonWie füge ich Text ohne Datenverlust an ein „'-Element hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!