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

Advantages of createElement over 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" />';

如何更新DIV的内容

2 个答案: