-1

Estoy haciendo un script que incluye una especie de eventListener, el problema es que no puedo hacer que me consiga nuevos elementos que aparezcan en la página, ¿Es posible hacer esto?

var texts = document.getElementsByClassName('content');
texts.addEventListener('tipo', funcion);

La cosa es que en la página en cuestión, van llegando mensajes. Lo más fácil sería modificar el CSS pero la idea es tratar de hacerlo en un script, hay algún eventListener ¿que me permita detectar cuando llegan/aparecen nuevos elementos?

Lo más similar que he conseguido es un

texts.addEventListener('onClick', funcion); 

Y es de lo más incómodo del mundo jeje

Algo que también he probado ha sido un setInterval(funcion, 1000); para que cada segundo repinte la página, pero es algo muy cutre.

5
  • Yo tiraría más por ponerle un setInterval() a una función que compruebe esos nuevos mensajes. Commented el 15 mar. 2019 a las 9:52
  • No me termina de quedar claro qué es lo que quieres hacer: ¿quieres realizar una acción cuando un elemento se añada a la página? ¿o quieres añadir un controlador de evento a ese nuevo elemento (en plan evento delegado de jQuery)?
    – Alvaro Montoro
    Commented el 15 mar. 2019 a las 13:43
  • @AlvaroMontoro quiero realizar una acción cuando un elemento se añada a la página, por ejemplo un elemento que tenga class = "x", cada vez que un elemento se añada a la página, quiero hacer algo.
    – Aritz
    Commented el 17 mar. 2019 a las 23:43
  • Mira el ejemplo que dejé, creo qué vás entender.
    – sbrubes
    Commented el 19 mar. 2019 a las 10:11
  • @sbrubes creo que lo pregunto es algo bastante claro, quiero realizar una función cada vez que un elemento se añada a la página. Por mucho que la edite, no se me ocurre como podría darle más claridad, si tienes alguna duda estaré encantado de responderte, pero a simple vista, no se me ocurre como podría mejorarla.
    – Aritz
    Commented el 20 mar. 2019 a las 10:19

1 respuesta 1

2

Si no me equivoco, lo que buscas en un MutationObserver.

let observer = new MutationObserver( (mutationsList, observer) => {

    const element = document.querySelector(''); // Añade el selector del elemente que recibe mutaciones

    for(let mutation of mutationsList) {

        if (mutation.type == "childList") {

            // Logica que necesites
        }
    }
});

observer.observe(elemento, { "childList" : true });

En este caso, este script observa cambios en la lista de nodos, es decir si añades o quitas nodos al elemento que observas, entrara en la logica.

También puedes observar muchas mas propiedades, pero ten en cuenta, que necesita navegadores "modernos" y puede que no sea compatible con ciertos.

1
  • 2
    @sbrubes En SOes se valora mucho el dicho Dale un pescado a un hombre y comerá un día, enséñale a pescar y comerá todos los días. Este código es más genérico e incluye una descripción de qué se quiere hacer y como funciona. Tu respuesta incita a un C&P que solucionará el problema de hoy pero no a uno similar mañana. Esta respuesta no es un ejemplo, es una guía Commented el 20 mar. 2019 a las 11:18

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.