Как найти и изменить динамический элемент в Javascript?

Question

[advancesss]

На странице динамически добавляются элементы.
Нужно к динамически созданным элементам добавить класс. Если при статических элементах я делаю так:

var li = document.querySelector("elementname");
li.style.classList.add("newclass");

То как это сделать при динамических создаваемых элементах ?

Comments

[VegasChickiChicki]

Возможно эта статья поможет?
https://learn.javascript.ru/event-delegation

Answer 1

[advancesss]

Реализовал так, работает.

$.ajaxSetup({
  complete: function() {
    
	$("element").addClass('newclass');
  }
})

Answer 2

[Сергей Соколов]

MutationObserver позволяет следить за изменениями DOM.

Это для «тяжёлых случаев», где вы никак не влияете на код, добавляющий элементы.

Answer 3

[Антон Неверов]

1) Генерировать событие при добавлении новых элементов. Ну и по этому событию делать то, что вы делаете
2) setInterval'ом каждые N-секунд искать новые элементы и добавлять класс.

Comments

[advancesss]

как мне кажется, во втором случае будет создаваться дополнительная нагрузка на клиентский компьютер

Answer 4

[hzzzzl]

в том куске, где они "динамически добавляются" (приходит от сервера ответ с готовым html?), там же им сразу добавлять класс?

div.innerHTML += responseFromServer

[...div.querySelectorAll('.some-class-name')].forEach(d => d.classList.add('new-class-name'))

Comments

[advancesss]

нет, готовый html не приходит, а просто динамически добавляется класс "active". Собственно задача найти элемент с динамически добавленным "active", и добавить к нему новый класс.

[ArtemGum]

Если класс active с анимацией или транзишеном, то можно повесить слушатель transitionend или animationend соответственно. Ну или если там происходит клик можно по event.target проверить элемент.