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

Question

这两种模式产生不同的结果，但从概念上讲，我希望它们是相同的。第一个只是更新现有的<div>，而第二个<div>按顺序附加 s。我预计两者都会产生第二种模式。所以我很好奇这两种模式如何访问 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

The difference is that

Pattern1 Add div into body and then change body text.
Pattern2 Create div change it's text and then append to body

Why it happens ?
Because the first pattern's selector is body, so when you use text it changes body text.

How to fix ?

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

Answer 2

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

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

考虑到行为相同的第一个场景，您需要创建一个 div 并将其附加到 body