不刷新整页仅刷新DIV/ID无效果，JS新手求助排查问题

核心问题排查 #

1. 异步执行顺序冲突
   $.get是异步请求，你在AJAX的done回调外直接修改#status、#showon的内容，会导致AJAX返回后替换的元素被后面的代码立刻覆盖。比如每1秒执行一次loop，AJAX请求还没完成，后面的if(time...)就先修改了DOM，等AJAX完成替换后，下一次循环又被覆盖。

2. 选择器不匹配
   代码中$('#showon').replaceWith($('#pshowon', newDom));，要确保请求回来的页面里确实存在id="pshowon"的元素，否则这次替换等于无效操作。

3. 未声明变量隐患
   time、imgElement、imgEeight都是未声明的变量，若这些变量没有全局定义，会导致if(time...)条件不成立（time为undefined，不满足>=0 && <=4），或者imgElement未初始化时调用src属性报错。

4. 重复DOM操作问题
   每次loop都执行container.appendChild(imgElement)，如果imgElement是同一个DOM元素，会导致它被反复移动；如果是未初始化的变量，这里会直接报错。

修复后的代码示例 #

JavaScript部分

var delay = 1000;
// 初始化必要变量
var time = 0; // 根据实际业务需求赋值
var imgElement = document.createElement('img');
imgElement.height = 70; // 修正拼写错误：imgEeight -> imgElement.height

function loop() {
  $.get("http://www.starhit1fm.com/Friday.html")
    .done(function(r) {
      var newDom = $(r);
      // 替换元素前先检查目标元素是否存在
      var newImgContainer = $('#imgContainer', newDom);
      if (newImgContainer.length) {
        $('#imgContainer').replaceWith(newImgContainer);
      }
      
      var newStatus = $('#status', newDom);
      if (newStatus.length) {
        $('#status').replaceWith(newStatus);
      }
      
      // 确认pshowon是正确的目标选择器
      var newShowon = $('#pshowon', newDom);
      if (newShowon.length) {
        $('#showon').replaceWith(newShowon);
      }

      // 将time判断逻辑移到AJAX回调内，避免覆盖异步返回的内容
      if (time >= 0 && time <= 4) {
        imgElement.src = "https://www.starhit1fm.com/images/covers/nonstop1.jpg";
        imgElement.width = 70;
        var container = document.getElementById("imageContainer");
        // 先清空容器再添加，避免重复插入图片
        container.innerHTML = '';
        container.appendChild(imgElement);
        
        var showstatus = "- - - - -&nbsp;&nbsp;Y O U&nbsp;&nbsp;&nbsp;A R E&nbsp;&nbsp;&nbsp;L I S T E N I N G&nbsp;&nbsp;&nbsp;T O&nbsp;&nbsp;- - - - -";
        document.getElementById("status").innerHTML = showstatus;
        
        var actshow = "&nbsp;Music Non Stop<br>&nbsp;We get you through the night!";
        document.getElementById("showon").innerHTML = actshow;
      }
    })
    .fail(function(err) {
      // 增加错误捕获，排查请求失败原因
      console.error('AJAX请求失败:', err);
    });
}

setInterval(loop, delay);

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div align="center">
  <table cellspacing="2" cellpadding="2">
    <tr>
      <td colspan="2" align="center">
        <font face="Verdana" size="3" color="#FF0000"><b><span class="blinking" id="status"></span></b></font>
      </td>
    </tr>
    <tr>
      <td>
        <div id="time"></div>
        <div id="imageContainer"></div>
      </td>
      <td valign="middle">
        <div>
          <span style="font-family: Verdana; font-size: 20px;">
         <b> <span id="showon"></span></b>
          </span>
        </div>
      </td>
    </tr>
  </table>
</div>

额外建议 #

• 打开浏览器控制台的网络面板，查看$.get请求的状态码和返回内容，确认请求是否成功、返回的HTML是否包含你需要的元素。
• 给未声明的变量添加明确的声明和初始化，避免隐式全局变量带来的问题。
• 如果遇到跨域问题，需要确保目标服务器配置了CORS允许当前域名访问，或者使用代理方式解决。

内容的提问来源于stack exchange，提问作者AndYman