Wie fügt man Text an ein `<div>` an?

Question

Ich verwende AJAX zum Anhängen von Daten an eine <div> Element, wo ich die <div> von JavaScript. Wie kann ich neue Daten an die <div> ohne die darin befindlichen früheren Daten zu verlieren?

Answer 1

Versuchen Sie dies:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

Answer 2

Verwendung von appendChild:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

Verwendung von innerHTML:
Bei diesem Ansatz werden, wie von @BiAiB erwähnt, alle Zuhörer für die vorhandenen Elemente entfernt. Seien Sie also vorsichtig, wenn Sie planen, diese Version zu verwenden.

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>";

Answer 3

Vorsicht vor innerHTML du sozusagen verlieren etwas, wenn man es benutzt:

theDiv.innerHTML += 'content';

Ist gleichbedeutend mit:

theDiv.innerHTML = theDiv.innerHTML + 'content';

Dadurch werden alle Knoten innerhalb Ihrer div und neue zu schaffen. Alle Verweise und Hörer auf Elemente darin gehen verloren. .

Wenn Sie diese beibehalten müssen (z. B. wenn Sie einen Click-Handler angehängt haben), müssen Sie die neuen Inhalte mit den DOM-Funktionen (appendChild,insertAfter,insertBefore) anhängen:

var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);

Answer 4

Wenn Sie es tun wollen schnell und wollen keine Referenzen und Hörernutzung verlieren: .insertAdjacentHTML() ;

"Es repariert das Element nicht es verwendet wird und somit die vorhandenen Elemente werden nicht beschädigt innerhalb des Elements. Dies und die Vermeidung des zusätzlichen Schritts der Serialisierung machen es wesentlich schneller als direkte innerHTML-Manipulation".

Unterstützt von allen gängigen Browsern (IE6+, FF8+, alle anderen und Mobile): http://caniuse.com/#feat=insertadjacenthtml

Beispiel aus https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Answer 5

Wenn Sie jQuery verwenden, können Sie $('#mydiv').append('html content') und der vorhandene Inhalt wird beibehalten.

http://api.jquery.com/append/