JavaScript Daten an div . anhängen

1. Verwenden Sie innerHTML, um Daten in JavaScript an div anzuhängen
2. Verwenden Sie appendChild, um Daten in JavaScript an div anzuhängen
3. Verwenden Sie insertAdjacentHTML(), um Daten an div in JavaScript anzuhängen
4. Verwenden Sie append() von jQuery, um Daten an div . anzuhängen

In diesem Tutorial wird erläutert, wie Sie mit JavaScript Daten an div anhängen.

Verwenden Sie innerHTML, um Daten in JavaScript an div anzuhängen

Bei dieser Methode wählen wir zuerst das div aus, indem wir einen der Selektoren verwenden, d. h. getElementById, getElementByTag, querySelector usw. Dann hängen wir die Daten an das innerHTML-Attribut von div an. Diese Methode hat einen Nachteil: Sie entfernt alle vorhandenen Event-Listener auf dem ausgewählten div. Es wird auch alle darin enthaltenen Knoten zerstören und durch neue ersetzen. Alle Verweise auf die Elemente gehen verloren.

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

Verwenden Sie appendChild, um Daten in JavaScript an div anzuhängen

Wie bei der vorherigen Methode wählen wir zuerst das div aus, indem wir einen der Selektoren verwenden. Aber anstelle von innerHTML verwenden wir appendChild wegen der Probleme, die in der vorherigen Methode besprochen wurden. Bevor wir ein Kind anhängen, müssen wir den Textknoten erstellen.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode('data that you want to add');
targetDiv.appendChild(content);

Verwenden Sie insertAdjacentHTML(), um Daten an div in JavaScript anzuhängen

Wie die zweite Methode ist diese Methode eine bessere Alternative zur ersten Methode. insertAdjacentHTML() analysiert das Element nicht und stört auch nicht die vorhandenen Elemente darin. Es ist viel schneller als innerHTML. Es hilft uns auch, die Position anzugeben, an der die Daten eingefügt werden sollen. Wie bei den vorherigen Methoden wählen wir zuerst das div aus und verwenden dann insertAdjacentHTML(), um die Daten an der gewünschten Position hinzuzufügen.

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

Verwenden Sie append() von jQuery, um Daten an div . anzuhängen

Die Append-Funktion nimmt die Eingabe des hinzuzufügenden Inhalts entgegen und kann mithilfe der jQuery-Syntax direkt für ein Tag aufgerufen werden. Auch diese Methode hat alle Nachteile der Methode innerHTML.

$('.divd').append('<p>Test</p>');