如何使用迭代来插入HTML

JZ.*_*JZ. 3 html javascript jquery loops

我有以下难看的硬代码:

<div class="label">
    <p id="CO-0"></p>
    <p id="CO-1"></p>
    <p id="CO-2"></p>
    <p id="CO-3"></p>
</div>
Run Code Online (Sandbox Code Playgroud)

如何在JavaScript中使用迭代自动插入0,1,2和3 pid?

这是我的开始:

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

Com*_*sNo 7

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


小智 6

虽然Dorin的答案是正确的,但出于效率原因,你应该一次性插入,因为DOM操作相对昂贵.

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