1

这两种模式产生不同的结果,但从概念上讲,我希望它们是相同的。第一个只是更新现有的<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/

4

2 回答 2

3

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>");
于 2012-12-13T19:20:56.663 回答
2
$(document).ready( function () {
    var list = [
        'My','name','is','Jonas'
        ];

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

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

于 2012-12-13T19:22:26.650 回答