Наличие Динамически Добавленного Элемента

Рассмотрим, как проверить наличие динамически добавленного элемента в DOM-дерево с помощью JavaScript.

Чтобы проверить наличие динамически добавленного элемента в DOM, воспользуйтесь следующим кодом.

<button type="button" class="btn">Проверить наличие элемента</button>

С помощью jQuery.

jQuery(($) => {
    $('.btn').on('click', () => {
        if (!$('.new-element').length == 0) {
            alert('Есть элемент!')
        } else {
            alert('Нет элемента!')
        }
    });
});

Пример.

В данном примере, мы проверяем наличие элемента .new-element после нажатия на кнопку, т.е. после события click. Но событие может быть и другим, submit, hover и т.п.

На нативном JavaScript это будет выглядеть следующим образом.

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', () => {
        if (document.querySelector('.new-element')) {
            alert('Есть элемент!');
        } else {
            alert('Нет элемента!');
        }
    });
});

Если вдруг у вас не сработает проверка, можете попробовать добавить setTimeout().

jQuery(($) => {
    $('.btn').on('click', () => {
        setTimeout(() => {
            // Ваш код

        }, 100);
    });
});

// или


document.addEventListener('DOMContentLoaded', () => {
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', () => {
        setTimeout(() => {
            // Ваш код

        }, 100);
    });
});

Возможно, вам также будет интересна статья о том, как определить клик вне элемента.

admin
09/05/2020 20:41