Пока за основную задачу не брался, решил сначала сам сделать страницу с динамически появляющимся элементом:
<html>
<head>
<script>
function f1()
{
document.getElementById('id1').innerHTML='<div id="id2" style="text-align:center;">SOME TEXT</div>'
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
observer.observe(document.querySelector('id1'), { childList: true});
</script>
</head>
<body>
<h1 style='text-align:center'>TEST!</h1>
<hr>
<input type='button' value="Add child!" onclick='f1()'>
<hr>
<div id="id1" style="width:100%; height:20px;"></div>
</body>
</html>
В div с id=id1 по нажатию на кнопку добавляется еще один div c id=id2, стили которого я позже хочу изменять при помощи скрипта.
Добавил туда ваш код, браузер ругается на следующее:
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.