当我们尝试使用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作为突变中的添加节点。
这是一个工作中的 JSFiddle:https://jsfiddle.net/aedhefhn/ https://jsfiddle.net/aedhefhn/
有解决方法吗?