триггер onchange для неупорядоченного списка

Question

Я программирую свое первое расширение Chrome, будучи новичком в Javascript, и у меня возникла следующая проблема: Я хочу выбрать область хештега Twitter, которая является ul с li внутри, ожидая добавления нового li для вызова функции. Я не знаю, как сделать триггер, потому что ни один из них не сработал:

//The <ul> from hashtag area:
var tl = document.getElementsByClassName('trend-items')[0];

//1.
tl.onchange = function(){
  doMyThings();
}

//2.
tl.addEventListener("change", function(){
  doMyThings();
});

Более того, когда я меняю экран, не выходя из Twitter (я имею в виду, например, в профиль), мой код не выполняется.

Спасибо!

Answer 1

UL не имеют события изменения, но вы можете достичь его с помощью MutationObserver, как показано ниже. Вставьте или удалите любой элемент li изнутри .trend-items, и вы увидите, что каждый раз, когда срабатывает функция doMyThings.

<ul class="trend-items">
    <li>item one1</li>
    <li>item one2</li>
</ul>

var tl = document.getElementsByClassName('trend-items')[0];

var config = { childList: true };

var doMyThings = function(mutationsList) {
    console.log('UL item inseted/deleted');
};

var observer = new MutationObserver(doMyThings);

observer.observe(tl, config);