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

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 的文本属性。

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

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