jquery - jQuery 中这两种模式访问 DOM 的方式有什么区别？

Question

这两种模式产生不同的结果，但从概念上讲，我希望它们是相同的。第一个只是更新现有的 <div>而第二个附加 <div>依次。我预计这两种模式都会产生这种结果。因此，我很好奇这两种模式如何访问 DOM 并给出结果的差异。

模式 1

$(document).ready( function () {
    var list = [
        'My','name','is','Jonas'
        ];

    $(list).each( function (key) {
        $("body").append("<div>").text(list[key]);
                  });
});​

http://jsfiddle.net/vtKEq/

模式 2

$(document).ready( function () {
    var list = [
        'My','name','is','Jonas'
        ];

    $(list).each( function (key) {
        $("<div />").text(list[key]).appendTo("body")
    });
});​

http://jsfiddle.net/MLFbw/

Answer 1

不同之处在于

Pattern1 将 div 添加到 body 中，然后更改 body 文本。
Pattern2 创建 div 更改其 text，然后附加到 body

为什么会发生这种情况？
因为第一个模式的选择器是 body，所以当您使用 text 时，它会更改 body 文本。

如何解决？

$("body").append("<div>" + list[key] + "</div>");