innerHTML thêm thay vì thay thế

Question

Tôi đang sử dụng mã này để cập nhật một div với một yêu cầu 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(); 

Tất cả mọi thứ hoạt động tốt, vấn đề là khi div với id some_id có rất nhiều nội dung trong đó tôi có thể thấy nội dung biến mất và sau đó xuất hiện được cập nhật sau khi yêu cầu AJAX đã được thực hiện.

Tôi nghĩ rằng đó là vì

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

là xoá bỏ và thay thế innerHTML của div với innerHTML cộng với nội dung mới trước, dẫn đến một hành vi previous content → blank → updated content.

Có cách nào để nối nội dung mới vào div thay vì thay thế toàn bộ nội dung bằng nội dung mới?

Answer 1

Giả sử rằng htmlhttp.responseText là một nút:

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

Nếu bạn chỉ có một chuỗi của HTML (mà dường như có khả năng), sau đó:

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

Mặt khác, nếu bạn phải nối thêm các phần tử mới từ một chuỗi:

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

Tham chiếu:

• Node.appendChild().

Answer 2

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

Answer 3

Bạn có thể sử dụng Element.insertAdjacentHTML().

insertAdjacentHTML() phân tích các văn bản quy định dưới dạng HTML hay XML và chèn các nút kết quả vào cây DOM ở một vị trí xác định. Nó không reparse phần tử nó đang được sử dụng và do đó nó không làm hỏng các phần tử hiện có bên trong phần tử. Điều này, và tránh bước thêm serialization làm cho nó nhanh hơn nhiều so với thao tác bên trong HTML trực tiếp.

Tôi đoán bạn sẽ làm gì

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