InnerHTML Anhängen, anstatt Sie zu ersetzen

Ich bin mit diesem code zu aktualisieren div mit einem AJAX-request

var xmlhttp;
if (window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { //code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("some_id").innerHTML += xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "http://example.com/");
xmlhttp.setRequestHeader('Content-Type', 'utf8');
xmlhttp.send();

Funktioniert alles einwandfrei, das problem ist, dass, wenn die div mit id some_id hat eine Menge von Inhalten in es ich den Inhalt sehen kann verschwinden, und dann erscheinen aktualisiert, nachdem der AJAX-request ausgeführt wurde.

Ich denke, dass es ist, weil

document.getElementById("some_id").innerHTML += xmlhttp.responseText;

Ist das löschen und ersetzen der innerHTML des div mit der vorherigen innerHTML plus den neuen Inhalten, was eine previous content → blank → updated content Verhalten.

Ist es ein Weg, um Anhängen den neuen Inhalt der div anstatt Sie zu ersetzen Ihren gesamten Inhalt mit dem neuen?

  • sind Sie mit jquery oder native javascript?
  • versuchen Sie, fügen Sie untergeordnete element, anstatt Sie zu ersetzen die gesamte html
  • Ich bin mit beiden, aber eine Reine javascript-Lösung wäre für mich besser
  • theoretisch sollten Sie nie sehen, das flimmern, da das rendering wird nur durchgeführt, nachdem das Skript callback endet. Haben Sie besonders kompliziert ist HTML?
  • wenn Sie mit jQuery sind, sollten Sie nie verwenden innerHTML direkt, denn es wird nicht entfernen Sie den Ereignis-Handler. Verwenden Sie die jQuery - .html option statt, oder Sie bekommen massive memory leaks (ja, Sie existieren in JavaScript)
  • Ja, es ist eine joomla-Website und die Vorlage hat eine Menge von verschachtelten divs
  • Klingt wie Sie machen vielleicht die rendering-engine cry. Versuchen Sie, begrenzen Sie die Menge an code, die auf der Seite auf einmal. Einige Websites, die Inhalte austauschen, die oberhalb/unterhalb des viewport mit großen, leeren divs aus diesem Grund (unter dem eigentlichen Inhalt lebendig als DOM bekannt ist, nur der JavaScript. d.h. nicht innerhalb des Dokuments enthalten)

InformationsquelleAutor BackSlash | 2013-08-30
  1. 12

    Unter der Annahme, dass htmlhttp.responseText ist ein Knoten:

    document.getElementById("some_id").appendChild(xmlhttp.responseText);

    Wenn Sie nur einen HTML-string an (was wahrscheinlich erscheint), dann:

    var newElement = document.createElement('div');
newElement.innerHTML = xmlhttp.responseText;
document.getElementById("some_id").appendChild(newElement);

    Auf der anderen Seite, wenn Sie anfügen müssen neue Elemente aus einem string:

    //getting a reference to the relevant element we're adding to:
var container = document.getElementById("some_id"),
    //creating a new element to contain the 'xmlhttp.responseText'
    newElement = document.createElement('div');
//setting the innerHTML of the 'newElement' to whatever 'xmlhttp.responseText' is:
newElement.innerHTML = xmlhttp.responseText;

/* (repeatedly) removing the firstChild, and appending it to the 'container',
   of the 'newElement' until it's empty: */
while (newElement.firstChild) {
    container.appendChild(newElement.firstChild);
}
//removing the now empty 'newElement':
newElement.parentNode.removeChild(newElement);

    Referenzen:

    • Und was ist, wenn es ist ein Haufen von Knoten?
    • Dann können Sie entweder iterieren über jeder dieser Knoten und verwenden appendChild() wiederholt, oder wickeln Sie Sie in einem Knoten und fügen Sie das - Knoten. Ohne zu sehen (ein Beispiel), was Sie in Ihrer xmlhttp.responseText variable es ist sehr schwer zu beantworten, speziell zu Ihrem Anwendungsfall.
    • Sah das update, was passiert, wenn ich muss "anfügen", um die aktuelle div-ohne eine neue erstellen?
    • htmlhttp.responseText ist wahrscheinlich ein string.
    • ja, das ist, warum ich fügte hinzu, die zweite code-block nach dem Satz " wenn Sie nur einen HTML-string an (was wahrscheinlicher scheint)'.
    • dann wird geben Sie ein Beispiel, was mit dem Sie arbeiten.
    • Dies ist das Beispiel. Ich möchte dem hinzufügen von Inhalt zu einem div ohne neue Elemente erstellen.
    • Ihre Letzte Beispiel funktionierte perfekt, aber ich musste hinzufügen eine Prüfung für newElement.parentNode!=undefined vor newElement.parentNode.removeChild(newElement);, es war mir keinen Zugriff auf removeChild() auf einem nicht-Objekt. Danke!!!

    InformationsquelleAutor David Thomas
  2. 6

    Könnten Sie - Element.insertAdjacentHTML().

    insertAdjacentHTML() analysiert den eingegebenen text als HTML-oder XML und fügt den Knoten in den DOM-Baum an einer bestimmten position. Es nicht neu Parsen der element verwendet wird, und damit es nicht beschädigt die vorhandenen Elemente in dem element. Dies, und die Vermeidung der zusätzliche Schritt der Serialisierung machen es viel schneller, als direkte innerHTML manipulation.

    Ich denke, Sie tun würde,

    const div = document.getElementById("some_id");
div.insertAdjacentHTML('beforeend', xmlhttp.responseText);;
    InformationsquelleAutor oldergod
  3. 4
    old_html = document.getElementById("some_id").innerHTML;
document.getElementById("some_id").innerHTML = old_html+xmlhttp.responseText;
    • Wie unterscheidet sich dies von mir?
    InformationsquelleAutor Ankit Agrawal
Schreibe einen Kommentar