如何使用js重新加载特定元素[关闭]答案

【问题标题】：how to reload a specific element with js [closed]如何使用js重新加载特定元素[关闭]
【发布时间】：2021-12-19 13:04:13
【问题描述】：

我只是想知道如何使用 javascript 代码重新加载特定元素或 div。

div：

<div id="profile_img">
   <figure>
      <img id="holla" src="avatar.gif"/>
   </figure>
</div>

希望你能帮忙。我真的需要它。谢谢

【问题讨论】：

这个 div 最初是如何创建到文档中的？
是什么意思？你能详细说明一下吗
你想“重新加载”什么？图片？您是否尝试添加新图片？
div 是从哪里来的？它是静态页面的一部分还是你用 JS 创建的？
是的，我想重新加载图片

标签： javascript html css web

【解决方案1】：

你可以在JS中轻松设置图片的来源：

document.getElementById("holla").src = "avatar.gif";

function refresh() {
document.getElementById("holla").src = "avatar.gif";
}

<div id="profile_img">
   <figure>
      <img id="holla" src="avatar.gif"/>
   </figure>
</div>
<button onclick="refresh();">Refresh Image</button>

【讨论】：

我认为它对我不起作用，我仍然需要重新加载整个页面以刷新图像。你能建议其他的吗
好的，这个 sn-p 我必须放入函数，然后调用函数本身，如： function reload() { document.getElementById("holla").src = document.getElementById("holla ").src; } 重载（）
对不起我的朋友，但它不起作用我已经尝试过了
我正在更新图片
@SenseofScience 我的意思是......“avatar.gif”是保持“avatar.gif”还是变成“avatar-2.gif”？

【解决方案2】：

如果您尝试从服务器重新加载，那么您可以进行 ajax 调用并将响应设置为该 div。 document.getElementById('holla').innerHTML = this.responseText;

【讨论】：

实际上我是 Web 开发的新手，所以你能说出你所说的 ajax 是什么意思吗？我的图像存储在 Firebase 存储中

【解决方案3】：

您必须有某种机制来加载图像。 Ajax 调用会异步加载图片。

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
  //you get response back from server in responseText.
  document.getElementById('holla').innerHTML = this.responseText;
}
// Send a request
xhttp.open("GET", "ajax_info.txt");// path to file
xhttp.send();

【讨论】：