我正在开发一个显示图像的应用程序。当用户向下滚动时，它将更新 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" />';