如何使用迭代插入 HTML答案

【问题标题】：How to use iteration to insert HTML如何使用迭代插入 HTML
【发布时间】：2012-01-13 15:34:46
【问题描述】：

我有以下难看的硬代码：

<div class="label">
    <p id="CO-0"></p>
    <p id="CO-1"></p>
    <p id="CO-2"></p>
    <p id="CO-3"></p>
</div>

如何在 JavaScript 中使用迭代来自动插入 0、1、2 和 3 p id？

这是我的开始：

for (i = 0; i< 3; i +=1){
    $('.label').html('<p id='+[i]+'></p>');
}

【问题讨论】：

【解决方案1】：

 for (i = 0; i < 4; i++){
       $('.label').append( '<p id="CO-'+ i +'"></p>' );
 };

【讨论】：

【解决方案2】：

虽然 Dorin 的回答是正确的，但出于效率原因，您应该一次性完成插入，因为 DOM 操作相对昂贵。

var html = '';
for (var i = 0; i < 4; i++){
   html += '<p id="CO-'+ i +'"></p>';
};
$('div.label').html(html);

【讨论】：

【解决方案3】：

一次完成所有 dom 插入更优雅/高效：

var inhtml ="";
for (var i = 0; i< 3; i +=1){
    inhtml += '<p id=CO-'+i+'></p>';
}

$('.label').html(inhtml);

【讨论】：