如何更新DIV的内容

How to update the content of a DIV

本文关键字：DIV 更新 何更新      更新时间：2023-09-26

我正在开发一个显示图像的应用程序。当用户向下滚动时，它会更新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），这对于互联网连接缓慢的用户来说不是最佳选择。

谢谢！

它清除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);

缓存div并附加到它。

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