javascript - 动态加载的元素不在 HTML 源代码中

Question

我从页面中获取 div 的属性，该页面在滚动到页面底部时动态加载元素。页面上最初有 10 个 div，滚动时每次都会动态加载 10 个新 div 到页面。

我的脚本如下所示:

var arr = document.getElementsByTagName('html')[0].innerHTML.match(/data-username="([^"]*")/gm); // I want the value from the attribute data-username
alert(arr.length); // size is 10

window.scrollTo(0, document.body.scrollHeight); // scroll to bottom to load 10 divs dynamically
arr = document.getElementsByTagName('html')[0].innerHTML.match(/data-username="([^"]*")/gm);

alert(arr.length); // size is still 10 but should be 20

为什么数组大小仍然是 10？我如何获取所有 20 个 div 并迭代它们？我查看了 HTML 源代码，问题是动态加载的 div 不存在...我应该如何获取动态加载的元素？

Answer 1

我假设您正在执行 ajax 调用来获取附加数据，并且您应该等待这些元素在 DOM 中可用(一旦完成)，然后再使用它们。使用 jQuery 这很容易(因为你将其作为标签)

• http://api.jquery.com/load/
• http://api.jquery.com/jQuery.ajax/