Какой есть обработчик событий когда добавляется новый элемент?

Question

[Demigodd]

$("#box").append("<span class='label'>test</span>");

Есть простой append, который в элемент box добавляет span элемент.
Как написать обработчик который смотрит на каждый добавляемый элемент, и если длина этих span`ov увеличиться больше 10 то удалить первый span.

пробовал вот так. Но change и update вероятно не смотрят на изменение контента...

$("#box").on("change update", function() {
    if($('#box').find('span').length() >= 9) {
        $('#box').find('span').first().remove();
    }
});

И как еще проверить что бы из каждого элемента было только по одной ?
Допустим если у span`ov есть класс. класс = 1 , и класс = 2.
Если последний элемент с классом 1, то след добавляемый элемент должен быть класса 2.

Answer 1

[AngReload]

Есть такая штука как MutationObserver, но использовать такое крайне не рекомендуется - гораздо лучше переделать код, который добавляет элемент, что при этом запускалась проверка на количество элементов и удаление первого.

У вас должно получиться что-то такое:

var elementIndex = 0
function addElement() {
    if($('#box').find('span').length() === 8) {
        $('#box').find('span').first().remove();
    }
    $("#box").append("<span class='label label_" + elementIndex + "'>test</span>");
    elementIndex = (elementIndex + 1) % 8;
}

Comments

[Demigodd]

Спасибо за Идею)