如何更新DIV的內容

Question

我正在開發一個顯示圖像的應用程序。 當用戶向下滾動時，它將更新div。 我的方法有效，但實際上並沒有更新div。 它清除div並向其中添加新內容。 那么，我將如何更新DIV？

目前，我正在使用這一行代碼。 當用戶位於我的div底部時，它將被調用

document.getElementById("myDiv").innerHTML = result + '<br /> <img src="/images/loading.gif" />';

我在代碼的頂部定義結果。 結果包含div當前的圖片：

result = result + '<img src="' + data.data[i].images.normal + '" /><br /><hr />';

因此，我希望將“ loading.gif”添加到div中。 但是如您所見，它將完全重新制作div（它將重新加載div），這對於互聯網連接速度慢的用戶而言並不是最佳選擇。

謝謝！

Answer 1

它清除div並向其中添加新內容。 那么，我將如何更新DIV？

您是說不想刪除myDiv的內容並向其中添加更多內容嗎？

document.getElementById("myDiv").innerHTML += result + '<br /> <img src="/images/loading.gif" />';

如果您擔心每次更新innerHTML都會將innerHTML解析回DOM的開銷，請將HtmlImageElement對象附加到div。

var myDiv = document.getElementById('myDiv');
myDiv.appendChild(imageObj);

這樣，就不必解析和重新呈現現有的myDiv內容。

var imgUrl = '/images/loading.gif';
var img = document.createElement('img');
img.src = imgUrl;
myDiv.appendChild(img);

createElement優於innerHTML的優勢？

您可以使用以下方法將基於innerHTML的方法轉換為appendChild：

result = result + '<img src="' + data.data[i].images.normal + '" /><br /><hr />';

var imgSrc = data.data[i].images.normal; //url of the image
var img = document.createElement('img');
img.src = imgSrc;
var br = document.createElement('br');
var hr = document.createElement('hr');

myDiv.appendChild(img);
myDiv.appendChild(br);
myDiv.appendChild(hr);

Answer 2

緩存div並將其追加。

var div = document.getElementById('myDiv'); 
div.innerHTML = div.innerHTML + result +'<br /> <img src="/images/loading.gif" />';