變異觀察者無法檢測通過innerHTML，appendChild添加的節點

Question

當我們嘗試使用appendChild或innerHTML在DOM中添加嵌套節點時，嵌套節點不會出現在突變的addNodes中。

初始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
});

如果我現在在div中使用嵌套的img節點執行appendChild，

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作為突變中的addNode。

這是一個工作的JSFiddle： https ://jsfiddle.net/aedhefhn/

有沒有解決方法？

Answer 1

那是預期的行為。 div是附加的所有元素，它剛好有一些孩子。 當然，您當然可以自己從.addedNodes遍歷其子節點。 .addedNodes只是一個節點數組，因此您可以遞歸遍歷每個項目以獲取所有子項。

變異觀察者無法檢測通過innerHTML，appendChild添加的節點

問題描述

1 個解決方案

解決方案1
2 已采納 2018-02-05 19:40:18

變異觀察者無法檢測通過innerHTML，appendChild添加的節點

問題描述

1 個解決方案

解決方案1 2 已采納 2018-02-05 19:40:18

解決方案1
2 已采納 2018-02-05 19:40:18