Question

我是网络开发的新手。我需要输出1-100之间的所有数字，每个数字都在一个新行上。以下代码仅输出最后一个数字：

var main = function() {

    for(var i = 1; i <= 100; i++) {
        $(".results").append("<p>").text(i);
    }
};

$(document).ready(main);

虽然，这正是我想要的：

var main = function() {
    var $content;

    for(var i = 1; i <= 100; i++) {
        $content = $("<p>").text(i);
        $(".results").append($content);
    }
};

$(document).ready(main);

为什么第二种解决方案有效但不是第一种？

Answer 1

第一个问题是append()返回父元素（.results元素）而不是附加到它的p。因此，您在每次迭代时更新.results的text属性。

另请注意，append()在性能方面是一项相对昂贵的操作，因此您可以通过重新排列逻辑来仅提高一次来提高执行速度：

var main = function() {
    var content = '';
    for (var i = 1; i <= 100; i++) {
        content += '<p>' + i + '</p>';
    }
    $(".results").append(content);
};

将数字1到100输出到页面上

1 个答案: