Mutation Observer не обнаруживает узлы, добавленные через innerHTML, appendChild

Question

Mutation Observer не обнаруживает узлы, добавленные через innerHTML, appendChild

Когда мы пытаемся добавить вложенные узлы в DOM, используя appendChild или innerHTML, вложенные узлы не входят в добавленные узлы мутации.

Начальная настройка HTML:

<html>
    <body>
        <div id="container">
        </div>
    </body>
</html>

Вот мой код наблюдателя мутации:

var observer = new MutationObserver(function(mutations) {
  for (var i = 0; i < mutations.length; i++) {
    var mutation = mutations[i];
    switch(mutation.type) {
      case 'childList':
        console.log(mutation.addedNodes);
      break;
      default:

    }
  }
});

observer.observe(document, {
    childList: true,
    subtree: true,
    attributes: true,
    characterData: true
});

Если я теперь делаю appendChild с вложенным узлом img в div,

var img = document.createElement('img');
img.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
var div = document.createElement('div');
div.appendChild(img);
var container = document.getElementById("container");
container.appendChild(div);

Mutation Observer регистрирует только div, добавленный к контейнеру, но не регистрирует img как добавленный узел в мутации.

Вот рабочий JSFiddle: https://jsfiddle.net/aedhefhn/

Есть ли обходной путь для этого?

4

innerhtml appendchild mutation-observers mutation-events

Источник

user1439003 05 фев '18 в 19:07

1 ответ

Решение

Другие вопросы по тегам innerhtml appendchild mutation-observers mutation-events

user785065 05 фев '18 в 19:40 2018-02-05 19:40 · Accepted Answer · 2018-02-05 19:40

Это ожидаемое поведение. div было все, что было добавлено, просто у него было несколько детей. Конечно, вы можете пройти через его дочерние узлы самостоятельно .addedNodes хоть. .addedNodes это просто массив узлов, так что вы можете пройти через каждый элемент рекурсивно, чтобы получить все дочерние элементы.