InnerHTML добавить вместо того, чтобы заменить

Question

Я использую этот код для обновления div с просьбой 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(); 

Все отлично работает, проблема в том, что, когда div с идентификатором some_id имеет много контента в нем я вижу, что содержимое исчезает, а затем появляется после обновления запроса AJAX.

Я думаю, что это потому, что

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

ли удаление и замена innerHTML в div с предыдущим innerHTML плюс нового содержания, в результате чего previous content → blank → updated content поведения.

Есть ли способ до добавить новый контент в div вместо того, чтобы заменить его весь контент на новый?

Answer 1

Предполагая, что htmlhttp.responseText является узлом:

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

Если у вас есть только строка HTML (который, кажется, скорее всего), то:

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

С другой стороны, если вы должны добавить новые элементы из строки:

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

Ссылки:

• Node.appendChild().

Answer 2

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

Answer 3

Вы можете использовать Element.insertAdjacentHTML().

insertAdjacentHTML() анализирует заданный текст в виде HTML или XML и вставок результирующих узлов в дерево DOM в указанной позиции. Он не повторяет элемент, на котором он используется, и, таким образом, он не повреждает существующие элементы внутри элемента. Это, и избегая дополнительного этапа сериализации, делает его намного быстрее, чем непосредственная манипуляция innerHTML.

Я думаю, вы могли бы сделать

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