突变观察器未检测到通过innerHTML、appendChild添加的节点 [英] Mutation Observer does not detect nodes added through innerHTML, appendChild
本文介绍了突变观察器未检测到通过innerHTML、appendChild添加的节点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我们尝试使用appendChild或innerHTML在DOM中添加嵌套节点时，嵌套节点不会出现在突变的addedNodes中。
初始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);
突变观察器仅记录附加到容器的div，而不将img记录为突变中的添加节点。
以下是一个正在运行的JSFdle：https://jsfiddle.net/aedhefhn/
是否有解决此问题的方法？
推荐答案
这是预期行为。div是唯一的附加内容，只是碰巧有一些孩子。不过，您当然可以自己从.addedNodes遍历它的子节点。.addedNodes只是一个节点数组，因此您可以递归地遍历每个项目以获得所有子项。
这篇关于突变观察器未检测到通过innerHTML、appendChild添加的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
