文档innerHTML在ajax加载上显示旧内容

Question

$.ajax({
  url: "/path/to/dynamic/html",
  type    : "GET"
}).done(function(result){
  $("#content").html(result)
  setTimeout(function(){
    console.log("Now, the html content is " + document.body.innerHTML )}, 10000)
})

/path/to/dynamic/html url返回一个纯字符串， i am the dynamic content

在10秒到期后，我希望控制台能够打印，

<div id="content">i am the dynamic content</div>

但是，控制台仍将旧内容打印为

<div id="content">i am the static content</div>

但页面会以新内容呈现。

为什么console.log即使在设置十秒到期后也会显示旧的DOM内容？

Answer 1

既然你有jQuery，请使用jQuery的方法：

$("body").html()

如果不为.html()方法提供参数，则返回HTML。当您提供参数时，它将替换HTML。

以下是对.html() method in the jQuery docs的引用，以获取有关该方法的更多信息。

修改

因此，要将此应用于您的代码，您可以执行以下操作：

$.ajax({
  url: "/path/to/dynamic/html",
  type    : "GET"
}).done(function(result){
  $("#content").html(result)
  setTimeout(function(){
    console.log("Now, the html content is " + $("body").html() )}, 10000)
})