Javascript 在动态构造行时，jQuery是否多次改变DOM？

考虑以下代码：

$('.widget').find('tbody')
  .append($('<tr>')
    .append($('<td>')
    )
    .append($('<td>')
      .text('Median Values')
    )
    .append($('<td>')
      .text(5)
    )
    .append($('<td>')
      .text(6)
    )
    .append($('<td>')
      .text(7)
    )
    .append($('<td>')
      .text(8)
    )
    .append($('<td>')
      .text(4.2)
    )
  );

$（'.widget'）.find（'tbody'））
.append（$（''）
.append（$（''）
)
.append（$（''）
.text（“中值”）
)
.append（$（''）
.案文（5）
)
.append（$（''）
.案文（6）
)
.append（$（''）
.案文（7）
)
.append（$（''）
.案文（8）
)
.append（$（''）
.文本（4.2）
)
);

---

在这种情况下，jQuery是多次还是仅一次改变DOM？我是否应该在内存中构造一个

，然后将其附加到

$（'.widget'）。find（'tbody'）

？

在这种情况下，它将只操作DOM一次，因为您只附加到DOM元素一次。我们可以使用

MutationObserver

来验证这一点：

var i=0；
var observeDOM=（函数（）{
var MutationObserver=window.MutationObserver | | window.webkit MutationObserver，
eventListenerSupported=window.addEventListener；
返回函数（obj，回调）{
if（MutationObserver）{
//定义一个新的观察者
var obs=新的突变观察者（功能（突变，观察者）{
if（突变[0]。addedNodes.length | |突变[0]。removedNodes.length）
回调（）；
});
//让观察者观察foo中儿童的变化
obs.观察（obj{
儿童名单：是的，
子树：真
});
}else if（eventListenerSupported）{
obj.addEventListener（'DomainNodeInserted'，回调，false）；
obj.addEventListener（'DOMNodeRemoved'，回调，false）；
}
};
})();
//观察特定的DOM元素：
observeDOM（document.getElementById（'widget'），function（）{
i++；
log（'dom更改'+i+'次'）；
});
$（“#小部件”）.find（'tbody'））
.append（$（''）
.附加（$（''）
.append（$（''）
.text（“中值”）
)
.append（$（''）
.案文（5）
)
.append（$（''）
.案文（6）
)
.append（$（''）
.案文（7）
)
.append（$（''）
.案文（8）
)
.append（$（''）
.文本（4.2）
)
);

，我认为它清楚地表明，在这种情况下，它只会操作DOM一次，因为您只会向DOM元素追加一次@baao这和dave的突变观察者有什么关系？我不仅得到了答案，而且还学到了观察DOM突变的新能力！！！非常感谢。