javascript 添加多个具有唯一名称和 ID 的表单字段

Question

这是同时添加多个输入字段的最佳方式吗？

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;
     document.getElementById("addpackage").innerHTML+=
     "<div class='sent-item'><h3>Papildus sūtījums Nr."+counter+"</h3><div class=form-group row'><label for='when' class='col-sm-2 control-label'></label><div class='col-sm-5'><label for='when-today' class='right-pad'>Aizvest šodien</label><input type='radio' name='when["+counter+"]'></div><div class='col-sm-5'><label for='when-notoday' class='right-pad'>Aizvest rīt</label><input type='radio' name='when["+counter+"]'></div></div><div class='form-group row extra-space'><label class='col-sm-2 control-label'>No? <span>*</span></label><div class='col-sm-6'><input type='text' class='textbox_1 form-control' id='from-company' name='from-company["+counter+"]'placeholder='Uzņēmuma nosaukums' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-address' name='from-address["+counter+"]' placeholder='Adrese' style='margin-bottom: 5px;'><input type='text' class='textbox_1 form-control' id='from-info' name='from-info["+counter+"]' placeholder='Kontaktinfo' ></div><div class='col-sm-4 center'><input id='enable_from' name='enable_from["+counter+"]' type='checkbox' /><label class='form-label col-sm-12'>No mums!</label></div></div>";

   }
}

我要添加的HTML太大了，很难管理。

Answer 1

这样添加

function add(){
   counter++;
   if (counter > 10){counter = 10;
   } else {
     document.getElementById("counter").value=counter;

     var selectItem = $('<div class="'"sent-item"'"></div>');
    $('<h3>Papildus sūtījums Nr."+counter+"</h3>').appendTo(selectItem);
    var row = $('<div class="form-group row">').appendTo(selectItem);
        $('<label for='when' class='col-sm-2 control-label'></label>').appendTo(row);
        var col5_1 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-today' class='right-pad'>Aizvest šodien</label>').appendTo(col5_1);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_1);
        var col5_2 = $('<div class='col-sm-5'></div>').appendTo(row);
            $('<label for='when-notoday' class='right-pad'>Aizvest rīt</label>').appendTo(col5_2);
            $('<input type='radio' name='when["+counter+"]'>').appendTo(col5_2);


     document.getElementById("addpackage").innerHTML+= selectItem;


   }