当我们尝试使用 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);
Mutation Observer 仅记录附加到容器的div,但不会将img记录为突变中的 addedNode。
这是一个有效的 JSFiddle:https ://jsfiddle.net/aedhefhn/
有解决方法吗?