InnerHTML append invece di sostituire

Question

sto usando questo codice per aggiornare un div con una richiesta AJAX

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(); 

Tutto funziona bene, il problema è che quando il div con id some_id ha un sacco di contenuti in esso Posso vedere il contenuto scomparire e poi apparire aggiornato dopo che la richiesta AJAX è stata eseguita.

Penso che sia perché

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

sta cancellando e sostituendo la innerHTML del div con il precedente innerHTML più il nuovo contenuto, con un conseguente comportamento previous content → blank → updated content.

C'è un modo per aggiungere il nuovo contenuto a div invece di sostituire l'intero contenuto con quello nuovo?

Answer 1

Supponendo che htmlhttp.responseText è un nodo:

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

Se avete solo una stringa di codice HTML (che sembra probabile), allora:

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

D'altra parte, se è necessario aggiungere nuovi elementi da una stringa:

// 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); 

Riferimenti:

• Node.appendChild().

Answer 2

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

Answer 3

Si potrebbe utilizzare Element.insertAdjacentHTML().

insertAdjacentHTML() analizza il testo specificato come HTML o XML e inserti i nodi risultanti nel albero DOM in una posizione specificata. Non aggiorna l'elemento su cui viene utilizzato e quindi non corrompe gli elementi esistenti all'interno dell'elemento. Questo, evitando il passaggio aggiuntivo della serializzazione, lo rende molto più veloce della manipolazione interna diretta di HTML.

immagino che faresti

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