Как узнать, появился ли элемент на странице?

Question

[Антон Покачалов]

После загрузки страницы, некий скрипт, к которому нет доступа, подгружает ajax-ом элементы в контейнер.
Нужно добавить к этим подгружаемым элементам html код. Непонятно, какое нужно использовать событие, чтобы узнать, когда появились элементы в контейнере.

Answer 1

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

Отслеживаем появление нового узла внутри целевого узла Как отловить создание нового IFrame на странице?
Отслеживаем изменение атрибутов Как отследить появление класса у элемента?

Comments

[Антон Покачалов]

Спасибо за ответ! Решил проблему с помощью, приведенного ниже, кода, есть косяки?)

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

nicenice: В тех решениях, что я привёл, есть поддержка IE9-10 с помощью Mutation Events. На IE8 я забиваю, но на эти версии на данный момент нельзя.

Answer 2

[Павел Гоголинский]

$(function() {

    foo();

    function foo() {
        var elems = $('.youclass').length();
        if (elems) {
            console.log('Element IS!');
        } else {
            foo();
        }
    }
});

Comments

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

Опять setTimeout?) Да вы шутите.

[Антон Покачалов]

стек вызовов рекурсий переполняется. я попробовал использовать бесконечный цикл до нахождения элемента и кажется на время сломал браузер))

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

nicenice: Бесконечный цикл — совсем жесть:) Однако, и таймеры также не лучший выход. Хотя для IE8 только они и могут помочь, ибо propertycange не касается изменения потомков.

Answer 3

[Антон Покачалов]

Решил проблему так:

$(function() {

    var loaded = false;

    var target = document.querySelector('#containerWhereLooking');
    var innerElement = 'idNewElements';

    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          for (var i = mutation.addedNodes.length; i--;) {
            if (mutation.addedNodes[i].id == innerElement) {
                workerWithNewElement();
                loaded = true;
                break;
            }
          }
          if (loaded)
            observer.disconnect();
        });    
    });

    var config = { attributes: true, childList: true, characterData: true }
     
    observer.observe(target, config);

    var workWithNewElements = function () {
        // work work work ...
    };
});