Можно ли отслеживать появление элемента на странице и вывести счётчик?

Question

Можно ли создать счётчик, который будет считать количество появлений одного и того же контейнера div? Как с помощью MutationObserver отслеживать появление <div class="MyClass"></div> и при каждом появлении это выводилось в качестве визуальной информации.

<div class="MyClass"></div>

    const container = document.querySelector(".container");
       var mycount = document.createElement('a');
       container.appendChild(mycount);
    mycount.text ='0';
    mycount.style.cssText = "position: absolute; top: 5px; left: 5px;\
       width: 20px; height: 20px; font-size: 10px; color: #f9f6f6;\
       text-align: center; background-color: #108ce5; border-radius: 10px; outline: none;";  
       mycount.id = 'mycount';
    
    let a = 0;
    function Counter() {  a += 1;  mycount.innerHTML = a; }

Answer 1

Можно ли создать счётчик, который будет считать количество появлений одного и того же контейнера div?

Конечно можно.

Как с помощью MutationObserver отслеживать появление и при каждом появлении это выводилось в качестве визуальной информации.

Например вот так можно сделать...

const observer = new MutationObserver(callback)
const node = document.querySelector('section')
const config = {
  childList: true,
  subtree: true, 
}
observer.observe(node, config)
//
function callback() {
  const n = node.querySelectorAll('.MyClass').length
  document.querySelector('nav span').textContent = n
}
document.querySelector('button').addEventListener('click', _ => {
  const o = document.createElement('div') 
  o.classList.add('MyClass')
  node.insertAdjacentElement('beforeend', o)
})

.MyClass {
  height: 10px;
  margin-top: 5px;
  border: 1px dotted;
}

<nav>
  <button>Добавить элемент</button>
  <p>Количество элементов <span>0</span></p>
</nav>
<section></section>

БЛОГ НА HUSL

Можно ли отслеживать появление элемента на странице и вывести счётчик?

Ответы (1 шт):