Наличие Динамически Добавленного Элемента
Рассмотрим, как проверить наличие динамически добавленного элемента в 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);
});
});
Возможно, вам также будет интересна статья о том, как определить клик вне элемента.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.