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

Question

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

具体示例是通过第三方Javascript代码将锚标记添加到页面中(我无法修改或轻松闪烁).我想更改链接的文本.

我希望有一些比setTimeout()循环更好的东西$(SOME ELEMENT).length > 0.(我在其中看到的一部分如何确定是否已将动态创建的DOM元素添加到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改为.

Answer 2

基于Daniel Buchner的技术,我创建了一个小型库来捕获DOM插入.使用它比黑客本身更舒适.

它使用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

Answer 3

你为什么不尝试这个？我不记得我使用过的确切功能但它有点类似于......

$(document).bind('DOMNodeInserted', function(event) {
      alert('inserted ' + event.target.nodeName + // new node
            ' in ' + event.relatedNode.nodeName); // parent
});

此外,我在此链接中找到了一些其他选项:

元素添加到页面时的事件