Question

// Some jQuery to load the HTML file
$(function(){
  $("#myDiv").load("./someHTMLfile.html");
});

var div = document.getElementById("myDiv");
console.log(div.childNodes);
console.log(div.childNodes[0]); // Prints undefined

当此代码运行时，列表div.childNodes为空，但是当我在Chrome控制台中检查变量时，列表不为空。 Chrome还告诉我，下面的＆＃34;对象状态会在首次展开时被捕获＆＃34; 。

当我在Chrome控制台中执行console.log(div.childNodes[0])时，它会返回第一个元素。我还尝试在页面完全加载jQuery $(document).ready()后使脚本执行，但它没有解决任何问题。

为什么会这样，我该如何解决？

Answer 1

load以异步方式运行，而且您已将其包装在jQuery ready函数中。所有这些意味着console.log(div.childNodes)在加载和插入someHTMLfile.html之前运行良好。

您需要做的是使用load中提供的回调函数来运行依赖于html的任何功能：

$(function(){
  $("#myDiv").load("./someHTMLfile.html", function() {
    var div = document.getElementById("myDiv");
    console.log(div.childNodes);
    console.log(div.childNodes[0]);
  });
});

在加载页面之前，childNodes列表为空

1 个答案: