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; 


    } 

Answer 2

那麼，顯然你發佈的代碼將無法正常工作，因爲沒有循環（我認爲這是你的意思寫）。如果它是一個循環，它會起作用。您可以將字符串格式化爲更具可讀性，並且可以維護或多或少。主要問題是格式化HTML內部的HTML可能很麻煩。 ES6有template strings，這將使這更多的管理。

模板庫（例如Mustache.js）也可以使代碼更清晰。請注意，Mustache模板不允許模板內的邏輯。因此，爲了在計數器後面有東西，你必須提供一個ID列表（這將很容易生成）。

例如，你的模板將是這樣的：

<div id="target">Loading...</div> 
<script id="template" type="x-tmpl-mustache"> 
    {{#ids}} 
     <div id="div_{{id}}"> 
      ... 
     </div> 
    {{/ids}} 
</script> 

然後使用模板會是這樣的代碼：

$(document).ready(function() { 
    var template = $('#template').html(); 
    var data = {ids: [ 
    {id: 1}, 
    {id: 2}, 
    {id: 3} 
    ]}; 
    var rendered = Mustache.render(template, data); 
    $('#target').html(rendered); 
}); 

的JS在這裏是一個多一點必要詳細以顯示超過計數器的潛力（但你必須通過計數器 - 無法在模板中計算）。

這將創造3周的div ID，如div_1，div_2等

JSFiddle。