确定是否已动态地将HTML元素添加到DOM
有没有一种方法可以通过jQuery.append()或其中一个本机Javascript节点操纵器，在Javascript或jQuery中找到何时动态地将HTML元素添加到DOM中？ 可能有几种不同的方法可以动态地将HTML元素添加到页面中，因此我不确定应该监听哪些事件或事件。
具体示例是通过第三方Javascript代码（我无法修改或轻松闪烁）将锚标记添加到页面中。 我想更改链接的文本。
我希望在$(SOME ELEMENT).length > 0上有比setTimeout()循环更好的东西。 （我在其中看到的一部分如何确定是否已将动态创建的DOM元素添加到DOM中？但它是从2008年开始的）
您可以使用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 。
基于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
你为什么不试试这个？ 我不记得我使用过的确切function但它有点类似于……
$(document).bind('DOMNodeInserted', function(event) { alert('inserted ' + event.target.nodeName + // new node ' in ' + event.relatedNode.nodeName); // parent });
另外，我在此链接中找到了一些其他选项：
元素添加到页面时的事件
不确定是否有人仍然在寻找这个，但我是，这是我最终使用的解决方案。
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);
通过调用__nodeInserted动画将类“alertInsertion”添加到页面的css中。
如果动画被触发，它将从元素中删除该类，并发出一个名为elementInserted的自定义事件，该事件包含触发它的元素。
只需添加一个事件监听器即可使用它：
document.addEventListener('elementInserted', function(e) { //Do whatever you want with e.target here. });
并将.alertInsertion类添加到要触发它的任何元素。
如果元素得到另一个带动画的类，它将在删除此类后运行。