InnerHTML dołączyć zamiast zastąpienia

Question

używam tego kodu, aby zaktualizować div z żądania 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(); 

wszystko działa poprawnie, problem jest, że gdy div id some_id ma dużo treści w nim Widzę, że zawartość znika, a następnie pojawia się zaktualizowana po wykonaniu żądania AJAX.

Myślę, że to dlatego,

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

Czy usunięcie i zastąpienie innerHTML z div z poprzednim innerHTML powiększonej o nowe treści, co skutkuje previous content → blank → updated content zachowanie.

Czy istnieje sposób, aby dołączyć nowych treści do div zamiast zastępowania całej zawartości nową?

Answer 1

Zakładając, że htmlhttp.responseText jest węzłem:

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

Jeśli masz tylko ciąg HTML (co wydaje się prawdopodobne), a następnie:

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

Z drugiej strony, jeśli trzeba dołączyć nowe elementy z ciągiem:

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

Referencje:

• Node.appendChild().

Answer 2

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

Answer 3

Można użyć Element.insertAdjacentHTML().

insertAdjacentHTML() analizuje podany tekst jako HTML lub XML i wkładki wynikające z węzłów do drzewa DOM w określonym położeniu. Nie odtwarza elementu, z którego jest używany, a zatem nie uszkadza istniejących elementów wewnątrz elementu. To i unikanie dodatkowego kroku serializacji powoduje, że jest on znacznie szybszy niż bezpośrednia manipulacja wewnętrzna HTML.

Chyba byś zrobił

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