确定 HTML 元素是否已动态添加到 DOM

Question

Javascript 或 jQuery 中是否有一种方法可以通过 jQuery.append() 或本机 Javascript 的节点操纵器之一来查明何时将 HTML 元素动态添加到 DOM？可能有几种不同的方法可以动态地将 HTML 元素添加到页面，所以我不确定应该监听什么事件。

具体示例是第三方 Javascript 代码（我无法修改或轻易收集）将锚标记添加到页面。我想更改链接的文本。

我希望有比 setTimeout() 循环更好的东西 $(SOME ELEMENT).length > 0 。 （我在 How can I determine if a dynamical-created DOM element has been added to the DOM? 中 看到了其中的一部分，但它是从 2008 年开始的）

原文由 Stephen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以为此目的使用 Mutation Observers - 至少在您不需要支持 IE/Opera 的情况下。

这是一个关于如何使用它们的简短示例（取自 html5rocks.com ）：

 var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(var i = 0; i < mutation.addedNodes.length; i++)
            insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document, {
    childList: true
});
console.log(insertedNodes);

注意 WebKit 前缀。您需要使用特定于浏览器的前缀。在 Firefox 中，它将是 Moz 。

2022 更新：您不需要使用 WebKit 或 Moz 作为前缀，因为大多数浏览器 都已实现它。现在可以通过 MutationObserver 访问。

原文由 ThiefMaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

基于 Daniel Buchner 的技术， 我创建了一个小型库来捕获 DOM 插入。它比 hack 本身使用起来更舒服。

它使用 css 动画事件，所以它不是基于 DOMMutationEvents，也不是 Mutation Observer。所以它不会减慢页面速度，而且它比 MutationObserver 有更广泛的支持。

它还有一个额外的好处，那就是能够 使用您想要的任何 CSS 选择器。

用法示例：

 insertionQ('.content div').every(function(element){
    //callback on every new div element inside .content
});

如果您在 DOMReady 之后调用它，它将只捕获新元素。

有关更多选项，请参阅 https://github.com/naugtur/insertionQuery

原文由 naugtur 发布，翻译遵循 CC BY-SA 3.0 许可协议