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

Question

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

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

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

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 作为前缀 have implemented it 。现在可以通过 MutationObserver 访问它。