Событие по созданию div в body

279

10 января 2020, 00:30

Подскажите, пожалуйста. Как можно отследить создание div по определённому классу в body, чтобы в дальнейшем работать с объектом div и его содержимым?

Answer 1

Можно воспользоваться относительно новым HTML5 API - MutationObserver

В этом примере мы слушаем все изменения в <body>, однако лучше слушать что-то менее изменяемое, например какой-то определенный вложенный блок, в котором вы ожидаете изменения

var observer = new MutationObserver(list => list.forEach(check)); 
document.body.onload = () => observer.observe(document.body, {childList: true}); 
 
function modify() { 
  let div = document.createElement('div'); 
  div.textContent = Math.random(); 
  document.body.append(div); 
} 
 
function check(mutation){ 
    // в mutation.addedNodes лежит NodeList из добавленных узлов 
    let el = mutation.addedNodes[0];  
    console.log(el); 
}

<button onclick="modify()">modify</button>

Если этот вариант не подходит по каким либо соображениям, можно воспользоваться старым способом - слушать событие 'DOMSubtreeModified', однако оно deprecated и иметь с ним дело - то еще удовольствие.