Определение того, был ли элемент HTML добавлен в DOM динамически

Question

Есть ли способ в Javascript или jQuery узнать, когда элемент HTML был добавлен в DOM динамически, либо через jQuery.append(), либо один из собственных манипуляторов узлов Javascript? Возможно, существует несколько способов добавления элементов 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

Вы можете использовать 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 
}); 

Кроме того, я нашел некоторые другие варианты по этой ссылке:

Event when element added to page

Answer 3

Основываясь на 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 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); 

Добавление класса «» alertInsertion в CSS страницы с помощью вызова анимации __nodeInserted.

Если анимация запускается, она удаляет класс из элемента и отправляет настраиваемое событие с именем elementInserted, которое включает в себя элемент, который его вызвал.

просто использовать его, добавив слушатель событий:

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

и добавление класса .alertInsertion любых элементов, которые вы хотите, чтобы вызвать его.

Если элемент получил еще один класс с анимацией, он будет запущен после удаления этого класса.