¿Hay algún evento para saber cuándo un elemento específico "comienza a existir" en JavaScript sin formato? Por ejemplo tengo

<div class="parent">
  <div class="child"></div>
</div>

Y quiero hacer algo cuando .parent y solo el .parent (no el .child) "comienza a existir" usando un evento en lugar de poner código js dentro de él. Traté de establecer Interval y verificar si el .parent existe.

1
xdev 2 mar. 2018 a las 16:09

3 respuestas

La mejor respuesta

Esta característica, los eventos de mutación que utilizan DOMSubtreeModified, etc., ahora se están eliminando por completo. como se muestra aquí, pero puede usar MutationObserver en su lugar especificaciones aquí

Un ejemplo simple sobre cómo usarlo tomado de aquí esto:

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

Puede obtener todos los parámetros de configuración para el objeto de configuración del observador aquí MutationObserverInit

2
Mihalis Bagos 2 mar. 2018 a las 13:29

Puede manejar los cambios DOM con DOMSubtreeModified.

Con jQuery

$(function() {
  $(".parent-wrapper").bind("DOMSubtreeModified", function() {
     if ($(this).find(".parent")) {
        alert("hey a new element with 'parent' class seems to be exist")
     }
  });
  
  
  //lets simulate dom change
  setTimeout(function() {
      $(".parent-wrapper").append('<div class="parent"><div class="child">test</div></div>');
   }, 3000);
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-wrapper">
  
</div>

Actualización :

Aquí está la versión javascript puro ,

document.getElementById("parent-wrapper").addEventListener('DOMSubtreeModified', function () {
  alert("hey a new element with 'parent' id seems to be exist")
}, false);

//lets simulate dom change
  setTimeout(function() {
      document.getElementById("parent-wrapper").innerHTML = '<div class="parent"><div class="child">test</div></div>';
   }, 3000);
<div id="parent-wrapper">
  
</div>
0
Okan Kocyigit 2 mar. 2018 a las 13:29

No puedo imaginar lo que quieres hacer, pero espero que esto te ayude

<div class="parent" onload="yourFunction()">
     <script>
         function yourFunction(){
             // your code
         }
     </script>
     <div class="child"></div>
</div>
2
mshouman 2 mar. 2018 a las 13:17