HTML要素がDOMに動的に追加されているかどうかを確認

Question

HTML要素がDOMに動的に追加されたときに、jQuery.append()またはネイティブJavascriptのノードマニピュレータのいずれかを使用してJavascriptまたはjQueryに通知する方法はありますか？ HTML要素をページに動的に追加するには、おそらくいくつかの異なる方法があります。そのため、どのイベントやイベントをリスンするべきかはわかりません。

特定の例は、アンカータグがサードパーティ製のJavaScriptコード（私は変更できない、または簡単にぼかすことができます）によってページに追加されていることです。私はリンクのテキストを変更したい。

私は、$(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となります。

Answer 2

あなたはこれを試してみませんか？私は私が使用される正確な機能を覚えていけないが、それはこれよりもちょっと似ています...

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

はまた、私は、このリンクで他のいくつかのオプションが見つかりました：私が持っているtechnique by Daniel Buchnerに基づいて

Event when element added to page

Answer 3

DOM挿入をキャッチするための小さなライブラリを作成しました。ハック自体よりも使いやすいです。

これはCSSのアニメーションイベントを使用しているため、DOMMutationEventsに基づいていないため、Mutation Observerではありません。したがって、ページを遅くすることはなく、MutationObserverよりも幅広いサポートがあります。

あなたが望むCSSセレクタを使用できるという利点があります。

使用例：あなたはDOMReadyた後、それを起動した場合

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

、それだけで新しい要素をキャッチするために起こっています。誰もがまだこれを探している場合

は、より多くのオプション

Answer 4

わからないためhttps://github.com/naugtur/insertionQueryを参照してくださいが、私はだった、これは私が使用して終了ソリューションです。

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アニメーションを呼び出して、ページのCSSへのクラスのalertInsertion」を追加します。

アニメーションがトリガされた場合、それは要素からクラスを削除し、それをトリガした要素を含むカスタムイベントeventInsertedを送出します。

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

、あなたはそれをトリガーにしたい任意の要素に.alertInsertionクラスを追加：

単にイベントリスナーを追加することによって、それを使用しています。

要素にアニメーションのある別のクラスがある場合、このクラスが削除された後に要素が実行されます。