So hängen Sie Text an eine “?

Lesezeit: 5 Minuten

So hangen Sie Text an eine
Adam

Ich verwende AJAX, um Daten an a anzuhängen <div> Element, wo ich die fülle <div> aus JavaScript. Wie kann ich neue Daten an die <div> ohne die zuvor darin gefundenen Daten zu verlieren?

  • $(div).append(daten);

    – Jimy

    15. April 2011 um 13:55 Uhr

  • @jimy das ist jquery, das muss man nicht für so eine triviale Sache verwenden

    – Naftali

    15. April 2011 um 13:55 Uhr

  • @Neal sicher, aber er verwendet auch AJAX, also ist jQuery definitiv eine gute Idee!

    – Alnitak

    15. April 2011 um 14:09 Uhr

  • @Alnitak, aber woher wissen Sie, dass das OP jQuery für irgendetwas verwendet?

    – Naftali

    15. April 2011 um 14:10 Uhr

  • @Alnitak, jQuery ist das nicht nur Ajax-Lösung

    – Naftali

    15. April 2011 um 14:24 Uhr

So hangen Sie Text an eine
Naftali

Versuche dies:

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

div.innerHTML += 'Extra stuff';

  • Gefahr, Will Robinson! Dies fügt hinzu HTML, kein Text. Wenn Ihre Extras vom Benutzer bereitgestellt werden, haben Sie gerade eine Sicherheitslücke eingeführt. Verwenden Sie besser die Antwort von @Chandu unten.

    – David gegeben

    13. Februar 2016 um 22:50 Uhr

  • Ja, es ist ein XSS-Schwachstelle. Es ist viel besser, stattdessen einen Textknoten mit dem Inhalt zu erstellen, wie in der Antwort unten beschrieben.

    – David gegeben

    12. April 2016 um 19:50 Uhr


  • Dies würde auch nicht funktionieren div enthält Elemente mit Ereignis-Listenern oder Eingaben mit vom Benutzer eingegebenem Text. Ich empfehle die Antwort von Chandu.

    – Sebastian Simon

    19. April 2016 um 16:09 Uhr


  • Dies wird nicht empfohlen, siehe Ist es möglich, an innerHTML anzuhängen, ohne die Ereignis-Listener der Nachkommen zu zerstören?

    – Bergi

    4. Oktober 2016 um 19:21 Uhr

  • Ja, ich empfehle dies definitiv nicht, da dies den Zustand aller Kontrollkästchen und Ereignis-Listener zerstören wird.

    – Kurcula

    20. November 2017 um 19:15 Uhr

So hangen Sie Text an eine
Chandu

AppendChild verwenden:

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

Verwendung von innerHTML:
Dieser Ansatz entfernt alle Listener für die vorhandenen Elemente, 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>"; 

  • Ich verwende diese Methode mit meinem “contenteditable”-Element mit der Angularjs-Bindung, und alles funktioniert korrekt!

    – Falschheit

    18. Oktober 2016 um 16:04 Uhr

  • Sollte in der Tat die akzeptierte Antwort sein. Nicht nur ein schöner Weg, sondern innerHTML wird das DOM neu erstellen, und das ist einfach keine gute Lösung. Verwenden Sie appendChild().

    – Jan Sverre

    7. Januar 2017 um 14:53 Uhr

  • Das ist besser, aber createTextNode funktioniert nicht, wenn Sie HTML laden. Wenn Sie beispielsweise Listenelemente hinzufügen wollten, würde dies nicht funktionieren. Das schränkt ziemlich ein.

    – Jake

    13. März 2017 um 5:58 Uhr

  • Was ist, wenn wir den Text desselben angehängten Textknotens im nächsten Ereignis ändern möchten?

    – Rahul Mischra

    1. März 2018 um 8:06 Uhr

  • Mit dem geht das viel einfacher neuere theDiv.append("The additional content.").

    – Sebastian Simon

    5. Januar um 22:00 Uhr

1646243528 903 So hangen Sie Text an eine
BiAiB

Vorsicht vor innerHTMLdu irgendwie verlieren etwas, wenn Sie es verwenden:

theDiv.innerHTML += 'content';

Ist äquivalent zu:

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

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

Wenn Sie sie 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);

  • ja, aber dies wird dazu führen, dass es eine gibt extra div innerhalb des übergeordneten div, was nicht benötigt wird und einige CSS-Stile durcheinander bringen könnte

    – Naftali

    15. April 2011 um 14:11 Uhr

  • @Neal dies ist nur ein Beispiel für die Verwendung von appendChild. der Punkt ist nicht hier.

    – BiAiB

    15. April 2011 um 14:16 Uhr

  • Der richtige Weg, dies zu tun appendChild wurde von @Cybernate erstellt

    – Naftali

    15. April 2011 um 14:17 Uhr

  • @Neal nein ist es nicht. Es ist weder richtig noch falsch. Es hängt nur davon ab, was das OP anhängen muss: Text, HTML-Code oder etwas anderes.

    – BiAiB

    15. April 2011 um 14:23 Uhr

  • @Neal, dies ist eine sehr gute Möglichkeit, die Daten anzuhängen, und vielseitiger als document.createTextNode().

    – Alnitak

    15. April 2011 um 14:27 Uhr

1646243529 462 So hangen Sie Text an eine
Mailand Rakos

Wenn Sie es tun möchten schnell und keine Referenzen verlieren wollen und Zuhörer verwenden: .insertAdjacentHTML();

“Es analysiert das Element nicht es wird auf und damit verwendet Es beschädigt die vorhandenen Elemente nicht innerhalb des Elements. Dies und die Vermeidung des zusätzlichen Schritts der Serialisierung machen es möglich viel schneller als direkte innereHTML-Manipulation.”

Unterstützt von allen gängigen Browsern (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>

1646243529 353 So hangen Sie Text an eine
Thomas Brasington

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

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

1646243530 502 So hangen Sie Text an eine
Gemeinschaft

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

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

Dies hat mir jedoch nicht ganz ausgereicht, da ich nach jeder Nachricht eine neue Zeile benötigte, sodass mein DIV mit diesem Code in ein gestyltes UL verwandelt 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. Ziemlich oft wird innerHTML verwendet, um Text innerhalb eines Elements abzurufen oder zu schreiben. Stattdessen sollte textContent verwendet werden. Da der Text nicht als HTML geparst wird, hat er wahrscheinlich eine bessere Leistung. Darüber hinaus vermeidet dies einen XSS-Angriffsvektor.

1646243530 523 So hangen Sie Text an eine
Slawo

Sogar das wird funktionieren:

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

div.innerHTML += 'Text to append';

914610cookie-checkSo hängen Sie Text an eine “?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy