文章/答案/技术大牛

发布

社区首页 >问答首页 >变异观察者没有检测到通过innerHTML，appendChild添加的节点

问变异观察者没有检测到通过innerHTML，appendChild添加的节点
EN

Stack Overflow用户

提问于 2018-02-05 19:07:25

回答 1查看 2K关注 0票数 4

当我们尝试使用appendChild或innerHTML在DOM中添加嵌套节点时，嵌套节点不会出现在突变的addedNodes中。

初始HTML setUp：

<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);

突变观察者只记录附加到容器中的div，而不将img记录为突变中的addedNode。

下面是一个工作的JSFiddle：https://jsfiddle.net/aedhefhn/

有办法解决这个问题吗？

innerhtml

appendchild

mutation-observers

mutation-events

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-05 19:40:18

这就是人们所期望的行为。div是附加的，只是碰巧有几个孩子。当然，您可以自己从.addedNodes中遍历它的子节点。.addedNodes只是一个节点数组，因此您可以递归地遍历每个项以获取所有子节点。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48629750

复制

相似问题

问变异观察者没有检测到通过innerHTML，appendChild添加的节点
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变异观察者没有检测到通过innerHTML，appendChild添加的节点EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问变异观察者没有检测到通过innerHTML，appendChild添加的节点
EN