Как отследить появление новых элементов в DOM?

Question

[MaxKondratenko]

Есть div, в который по нажатию кнопки сторонним плагином добавляются новые элементы DOM (создаётся модальное окно), и после того как оно появилось, нужно сразу же произвести пару действий. Например, заменить значение в текстовом поле и изменить значение атрибута. Проблема в том, как отследить, что это текстовое поле появилось, и как изменить его атрибуты после того как оно появилось?

P.S. Лезть в плагин сторонний нет возможности, так как он обновляется и всё слетит после обновления.

Answer 1

[Сергей Мельников]

https://developer.mozilla.org/ru/docs/Web/API/Muta...

// выбираем нужный элемент
var target = document.querySelector('#some-id');

// если jQuery
var target = $('#some-id')[0];
 
// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };
 
// запускаем механизм наблюдения
observer.observe(target,  config);
 
// позже, если надо, прекращаем наблюдение
observer.disconnect();

Comments

[Илья Шатохин]

А зачем городить столько нативного кода при наличии Jquery? Тем более просят наблюдать лишь за добавлением нового элемента.

[Сергей Протько]

Илья Шатохин: А чем вам тут jQuery поможет? тут обзервер, будет реагировать вообще на все. Вы же листенер навесили.

[Илья Шатохин]

Сергей Протько: В смысле? В моем примере событие будет услышано только, когда в elem добавится другой элемент. Можете поиграть с консолью браузера. Под запрос топикстартера другое и не требуется.

[Евгений Петров]

Илья Шатохин: Ну есть же темы на Тостере. Всё там написано Как отловить создание нового IFrame на странице?

[Илья Шатохин]

Евгений Петров: У топикстартера просьба сильно проще, чем решение по вашей ссылке.
Также MutationObserver требует IE >= 11, а MutationEvent лишь >= 9 (хоть в вашем решении и есть полифил).

[Евгений Петров]

Я повторю то, что написал вам — не рекомендуется использовать Mutation Events, если клиент поддерживает MutationObserver. Если уровень подготовки ТС не слишком высок,это не означает, что ему надо предлагать не самый лучший вариант.

[Илья Шатохин]

Евгений Петров: основная проблема MutationEvent - это попытка синхронно менять DOM в обработчике всплывающего Mutation события. Да, это может привести к зацикливанию или тормозам. Но топикстартер будет слушать DOMNodeInserted и не будет добавлять новые элементы (по его словам) в обработчике, только менять атрибуты, соответственно, его эта проблема tuj не коснется. А так вы конечно правы, сам я по возможности использую MutationObserver.

Answer 2

[Илья Шатохин]

$(elem).on("DOMNodeInserted", function (event) { /* ваш код */ });

Comments

[MaxKondratenko]

Спасибо за ответ. А можно ли поймать появление определённого элемента ? если известен его класс ?

[Илья Шатохин]

MaxKondratenko: Можно: $(event.target).find(".class")

[MaxKondratenko]

Спасибо огромное ! )

[Платон Фёдорович]

Илья Шатохин: Не поможете разобраться в похожей ситуации в этом вопросе Как в jQuery отследить асинхронное создание нового элемента в документе и добавить к нему ответ из функции? (там в комментариях более развёрнуто описана проблема). Если не сложно.

[Иван Гончаренко]

спасибо! рецепт очень выручил.

[Tony Ter]

А я .livequery() использовал. Плагин надо цеплять, но потом всё проще)

Answer 3

[Вениамин]

Смотри здесь:
en.wikipedia.org/wiki/DOM_events
Секция - Mutation

Comments

[Евгений Петров]

Плохо. Почитайте аргументы против событий Как отловить создание нового IFrame на странице?

Answer 4

[Кеша Пуделев]

Попробуй LiveQuery.
Был такой же вопрос, надо было кастомить кнопку, которая прилетала со стороннего сервиса.

Answer 5

[Raz-Dva]

$("#modInfo").on('shown.bs.modal', function(e){ ... });
При появлении(shown) модального окна над ним можно выполнять какие-нибудь действия. Для bootstrap мод. окна это точно работает.

Answer 6

[Антон M]

const elementReady = (parent, selector) => {
  return new Promise(resolve => {
    let el = parent.querySelector(selector)
    if (el) {
      resolve(el)
    }
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(parent.querySelectorAll(selector)).forEach(element => {
        resolve(element)
        // Once we have resolved we don`t need the observer anymore.
        observer.disconnect()
      })
    }).observe(parent.documentElement, {
      childList: true,
      subtree: true,
    })
  })
}

Или вот плагин