javascript - obtiene - saber si existe una clase jquery

Determinar si un elemento HTML se ha agregado al DOM dinámicamente

Question

¿Hay alguna forma en Javascript o jQuery para averiguar cuándo se ha agregado dinámicamente un elemento HTML al DOM, ya sea a través de jQuery.append() o uno de los manipuladores de nodo de Javascript nativo? Probablemente hay varias formas diferentes de agregar elementos HTML a la página dinámicamente, así que no estoy seguro de qué evento o eventos debo escuchar.

El ejemplo específico es que una etiqueta de ancla se agrega a la página mediante un código Javascript de un tercero (que no puedo modificar o destellar fácilmente). Quiero cambiar el texto del enlace.

Espero que haya algo mejor que un bucle setTimeout() en $(SOME ELEMENT).length > 0 . (parte de lo que vi en ¿Cómo puedo determinar si un elemento DOM creado dinámicamente se ha agregado al DOM? pero es de 2008)

Answer 1

¿Por qué no intentas esto? No recuerdo la función exacta que utilicé, pero es algo similar a esto ...

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

Además, encontré algunas otras opciones en este enlace:

Evento cuando elemento añadido a la página.

Answer 2

Basada en la técnica de Daniel Buchner , he creado una pequeña biblioteca para capturar inserciones de DOM. Es más cómodo de usar que el propio hack.

Utiliza eventos de animación css, por lo que no se basa en DOMMutationEvents y no es Mutation Observer. Así que no está ralentizando la página y tiene un soporte más amplio que MutationObserver.

Tiene la ventaja adicional de poder utilizar cualquier selector de CSS que desee.

Ejemplo de uso:

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

Si lo invocas después de DOMReady, solo capturará elementos nuevos.

Vea https://github.com/naugtur/insertionQuery para más opciones

Answer 3

No estoy seguro de si alguien todavía está buscando esto, pero estaba y esta es la solución que terminé usando.

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);

Agregar la clase ''alertInsertion'' al css de la página con una llamada a la animación __nodeInserted.

si la animación se activa, elimina la clase del elemento y envía un evento personalizado llamado elementInserted que incluye el elemento que lo activó.

simplemente úselo agregando un detector de eventos:

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

y agregar la clase .alertInsertion a cualquier elemento que desee desencadenar.

Si el elemento obtuvo otra clase con una animación, se ejecutará después de que se haya eliminado esta clase.

Answer 4

Puede usar Mutation Observers para este propósito, al menos si no necesita ser compatible con IE / Opera.

Aquí hay un breve ejemplo (tomado de html5rocks.com ) sobre cómo se usan:

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);

Tenga en cuenta el prefijo Webkit . Necesitas usar el prefijo específico del navegador. En Firefox sería Moz lugar.