Innerhtml anhängen anstatt sie zu ersetzen

Question

ich diesen Code mit einem 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(); 

Alles funktioniert gut zu aktualisieren, ist das Problem, dass, wenn die div mit id some_id hat eine Menge von Inhalten in es Ich kann den Inhalt verschwinden sehen und dann aktualisiert erscheinen, nachdem die AJAX-Anfrage ausgeführt worden ist.

Ich denke, dass es ist, weil

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

löscht und die innerHTML des div mit dem vorherigen innerHTML ersetzt und die neuen Inhalte, was zu einem previous content → blank → updated content Verhalten.

Gibt es einen Weg zu anfügen den neuen Inhalt der div statt den gesamten Inhalt durch den neuen ersetzen?

Answer 1

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

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

Wenn Sie nur eine Reihe von HTML, dann (was wahrscheinlich scheint):

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

Auf der anderen Seite, wenn Sie anhängen 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:

• Node.appendChild().

Answer 2

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

Answer 3

könnten Sie Element.insertAdjacentHTML() verwenden.

insertAdjacentHTML() analysiert den angegebenen Text als HTML oder XML und Einsätze die resultierenden Knoten in der DOM-Struktur an einer bestimmten Position. Es analysiert nicht das Element, auf dem es verwendet wird, und daher werden die vorhandenen Elemente im Element nicht beschädigt. Dies und die Vermeidung des zusätzlichen Schritts der Serialisierung machen es viel schneller als direkte innerHTML-Manipulation.

Ich denke, man

tun würde

const div = document.getElementById("some_id"); 
div.insertAdjacentHTML('beforeend', xmlhttp.responseText);;