Wie füge ich Daten mit JavaScript an div an?

Ich verwende AJAX, um Daten an das div-Element anzuhängen, wo ich das div aus JavaScript fülle. Wie kann ich neue Daten an das div anhängen, ohne die vorherigen in div gefundenen Daten zu verlieren?

Versuche dies:

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

div.innerHTML += 'Extra stuff';

Verwenden von appendChild:

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

Verwenden von innerHTML: Bei
diesem Ansatz werden alle Listener für die vorhandenen Elemente entfernt, wie von @BiAiB erwähnt. Seien Sie also vorsichtig, wenn Sie diese Version verwenden möchten.

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

Vorsicht innerHTML, du verlierst etwas, wenn du es benutzt:

theDiv.innerHTML += 'content',     

Ist äquivalent zu:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Dadurch werden alle Knoten in Ihrem Knoten zerstört divund neue erstellt. Alle Verweise und Listener auf darin enthaltene Elemente gehen verloren .

Wenn Sie sie behalten müssen (z. B. wenn Sie einen Klick-Handler angehängt haben), müssen Sie den neuen Inhalt an die DOM-Funktionen anhängen (appendChild, insertAfter, insertBefore):

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

Wenn Sie es schnell machen und keine Referenzen und Listener verlieren möchten, verwenden Sie: .insertAdjacentHTML () ;

" Das Element, für das es verwendet wird, wird nicht erneut analysiert, und die vorhandenen Elemente im Element werden nicht beschädigt . Dies und die Vermeidung des zusätzlichen Serialisierungsschritts machen es viel schneller als die direkte Manipulation von innerHTML."

Unterstützt von allen Hauptbrowsern (IE6 +, FF8 +, Alle anderen und Mobilgeräte): 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>

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

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

Auch das wird funktionieren:

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

div.innerHTML += 'Text to append';

IE9 + (Vista +) Lösung, ohne neue Textknoten zu erstellen:

var div = document.getElementById("divID");
div.textContent += data + " ";

Dies war jedoch nicht ganz der Trick für mich, da ich nach jeder Nachricht eine neue Zeile benötigte, sodass mein DIV mit diesem Code zu einem gestalteten UL wurde:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

Von https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

Unterschiede zu innerHTML

innerHTML gibt den HTML-Code zurück, wie der Name schon sagt. Sehr oft verwenden Menschen innerHTML, um Text innerhalb eines Elements abzurufen oder zu schreiben. Stattdessen sollte textContent verwendet werden. Da der Text nicht als HTML analysiert wird, ist die Leistung wahrscheinlich besser. Darüber hinaus wird dadurch ein XSS-Angriffsvektor vermieden.

Sie können jQuery verwenden. das macht es sehr einfach.

Laden Sie einfach die jQuery-Datei herunter und fügen Sie jQuery in Ihren HTML-Code ein,
oder Sie können den Online-Link verwenden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

und versuchen Sie dies:

 $("#divID").append(data);

Die folgende Methode ist weniger allgemein als andere. Sie ist jedoch hilfreich, wenn Sie sicher sind, dass Ihr letzter untergeordneter Knoten des div bereits ein Textknoten ist. Auf diese Weise erstellen Sie keinen neuen Textknoten mit appendData MDN Reference AppendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

Warum nicht einfach setAttribute verwenden?

thisDiv.setAttribute('attrName','data you wish to append');

Dann können Sie diese Daten erhalten von:

thisDiv.attrName;

Java-Skript

document.getElementById("divID").html("this text will be added to div");

jquery

$("#divID").html("this text will be added to div");

Verwenden Sie .html()ohne Argumente, um zu sehen, dass Sie eingegeben haben. Sie können die Browserkonsole verwenden, um diese Funktionen schnell zu testen, bevor Sie sie in Ihrem Code verwenden.