Добавить пользовательские атрибуты при изменении содержимого div

Question

У меня есть пустой div (id = "parent"), внутри которого сторонний виджет отображает некоторый контент (например, div и теги привязки). Теперь мне нужно добавить некоторые атрибуты в теги div и anchor всякий раз, когда они визуализируются виджетами.

Так что у меня MutationObserver, как показано ниже:

var parent = document.getElementById("parent"); 
var observer = new MutationObserver(function(mutations){ 
    functionToAddCustomAttributes(); 
}); 

observer.observe(parent, { 
    subtree: true, 
    childList: true 
}); 

Внутри functionToAddCustomAttributes(), у меня есть код, чтобы добавить атрибуты. Мой вопрос в том, что если я добавлю атрибуты, не должен ли он снова вызвать MutationObserver, так как я обновляю дочерний элемент #parent? Разве это не должно вызвать бесконечный цикл? Это не похоже, что это происходит в моем коде, поэтому я просто хочу убедиться, что это правильный способ сделать это.

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

Answer 1

Слушайте событие onDomSubTreeModified для родительского div вместо MutationObserver. В обратном вызове добавьте свои пользовательские атрибуты и используйте return false; чтобы быть в безопасности.

Answer 2

После кода для добавления атрибутов, попробуйте следующее:

$('#parent').find('#someChild').attr('name', 'value');