Question

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

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

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

Answer 1

基于technique by 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 2

您可以使用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 3

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

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

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

Event when element added to page

Answer 4

不确定是否有人仍然在寻找这个，但我是，这是我最终使用的解决方案。

var __css = document.createElement("style");
__css.type = "text/css";
__css.innerHTML = '.alertInsertion {animation: __nodeInserted 0.001s !important; -o-animation: __nodeInserted 0.001s !important; -ms-animation: __nodeInserted 0.001s !important; -moz-animation: __nodeInserted 0.001s !important; -webkit-animation: __nodeInserted 0.001s !important;}'+
'@keyframes __nodeInserted {from{outline-color: #111;}to{outline-color: #000;}}'+
'@-moz-keyframes __nodeInserted {from{outline-color: #111;}to{outline-color: #000;}}'+
'@-webkit-keyframes __nodeInserted {from{outline-color: #111;}to{outline-color: #000;}}'+
'@-ms-keyframes __nodeInserted {from{outline-color: #111;}to{outline-color: #000;}}'+
'@-o-keyframes __nodeInserted {from{outline-color: #111;}to{outline-color: #000;}}';
document.body.appendChild(__css);

insertion_event = function(event){
    if (event.animationName == '__nodeInserted') {
        event.target.className = event.target.className.replace(/\balertInsertion\b/,'');
        document.dispatchEvent(new CustomEvent('elementInserted', {'target': event.target}));
    }
}

document.addEventListener('animationstart', insertion_event, false);
document.addEventListener('MSAnimationStart', insertion_event, false);
document.addEventListener('webkitAnimationStart', insertion_event, false);

添加课程＆＃39; alertInsertion＆＃39;通过调用__nodeInserted动画来调用页面的CSS。

如果动画被触发，它将从元素中删除该类，并发出一个名为elementInserted的自定义事件，该事件包含触发它的元素。

只需添加一个事件监听器即可使用它：

document.addEventListener('elementInserted', function(e)
{
    //Do whatever you want with e.target here.
});

并将.alertInsertion类添加到要触发它的任何元素。

如果元素得到另一个带动画的类，它将在删除此类后运行。

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

4 个答案: