Проверить появление элемента JS

13 марта 2021, 12:00

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

У меня автоматически через сторонний код подгружается элемент <div id onesignal-popover-dialog>
Нужно проверить, когда появляется это окно, а после вывести хотя бы Alert.

Подскажите как это сделать. После C# в js по-другому как-то циклы и паузы состоят.

Answer 1

Как то так:

// раз в секунду ищем элемент 
let i = setInterval(function() { 
    if (document.querySelector("#onesignal-popover-dialog")){ 
        // если нашли останавливаем таймер и вызываем алерт 
        clearInterval(i); 
        alert("element found") 
    } 
}, 1000); 
 
// эмуляция асинхронного добавления, через 2 секунды добавим элемент 
setTimeout(function(){ 
  document.write("<div id='onesignal-popover-dialog'>hello</div>") 
},1000)

Answer 2

Думаю вам поможет MutationObserver. Можно отслеживать изменения DOM.

Answer 3

В моём ответе я отлавливаю событие click на элементе div с классом click-me. Когда по эл-ту кликнули, срабатывает событие, в котором мы описали появление div с классом alert. А так же вызовется функция('show_info_about_alert'), которая сообщит нам, что отображен div с классом alert.

На нативном:

const cm = document.querySelector(".click-me"); 
cm.addEventListener("click", function(){ 
  const al = document.querySelector(".alert"); 
  al.style.display = 'block'; 
  show_info_about_alert(); 
}, false); 
 
show_info_about_alert = () => console.log('Появился alert!');

.alert{ 
  display:none; 
}

<div class="click-me"> 
  Show alert! 
</div> 
<div class="alert"> 
  Super! 
</div>

С использованием библиотеки Jquery:

$('.click-me').on('click', function() { 
  $('.alert').css('display', 'block'); 
  show_info_about_alert(); 
}); 
 
show_info_about_alert = () => console.log('Появился alert!');

.alert{ 
  display:none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="click-me"> 
  Show alert! 
</div> 
<div class="alert"> 
  Super! 
</div>

Так же можно прикладываю сылку на документацию с примерами.