Как использовать итерацию для вставки HTML

Question

У меня следующий ужасный жесткий код:

<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?

Это мое начало:

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

Answer 1

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

Answer 2

Хотя ответ Дорина верен, по соображениям эффективности вы должны выполнить вставку за один раз, поскольку манипуляции с DOM относительно дороги.

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

Answer 3

Это более элегантно / эффективно, чтобы сделать все ваши вставки дом сразу:

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

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