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

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

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

Allerdings hat dies nicht ganz den Trick für mich tun, da ich eine neue Zeile nach jeder Nachricht benötigt, so dass meine DIV in ein gestyltes UL mit diesem Code verwandelt:

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, wie der Name schon sagt, den HTML-Code zurück. Häufig wird innerHTML verwendet, um Text innerhalb eines Elements abzurufen oder zu schreiben. textContent sollte stattdessen verwendet werden. Da der Text nicht als HTML geparst wird, ist eine bessere Leistung zu erwarten. Außerdem wird dadurch ein XSS-Angriffsvektor vermieden.

Answer 2

Auch das wird funktionieren:

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

div.innerHTML += 'Text to append';

Answer 3

Eine Option, die meiner Meinung nach besser ist als alle bisher genannten, ist Element.insertAdjacentText() .

// Example listener on a child element
// Included in this snippet to show that the listener does not get corrupted
document.querySelector('button').addEventListener('click', () => {
  console.log('click');
});

// to actually insert the text:
document.querySelector('div').insertAdjacentText('beforeend', 'more text');

<div>
  <button>click</button>
</div>

Die Vorteile dieses Ansatzes sind:

• Verändert nicht die vorhandenen Knoten im DOM; nicht beschädigte Ereignis-Listener
• Einsätze Text , nicht HTML (Am besten verwenden Sie nur .insertAdjacentHTML beim absichtlichen Einfügen von HTML - eine unnötige Verwendung ist semantisch weniger geeignet und kann das Risiko von XSS erhöhen)
• Flexibel; das erste Argument für .insertAdjacentText können sein beforebegin , beforeend , afterbegin , afterend je nachdem, wo der Text eingefügt werden soll

Answer 4

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

Laden Sie einfach die jQuery-Datei herunter und fügen Sie jQuery in Ihr HTML ein
oder Sie können den Online-Link benutzen:

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

und versuchen Sie dies:

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

Answer 5

Die folgende Methode ist weniger allgemein als andere, eignet sich jedoch hervorragend, wenn Sie sicher sind, dass der letzte untergeordnete Knoten des div bereits ein Textknoten ist. Auf diese Weise erstellen Sie keinen neuen Textknoten mit appendData MDN-Referenz 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");