克隆空的表单域

Question

我仍在尝试创建用户可以即时添加的空白字段。我正在尝试克隆以下隐藏模板，但无法添加。

我的 HTML

 <div class="_100">
  <fieldset id="FieldBlank">
   <div id="readroot" class="hidden">

    <div class="_100">
     <div class="_50"> QA Sample ID:<input type="text" id="QASampleID" name="QASampleID"></div>
     <div class="_50" data-role="controlgroup" data-mini="true" data-type="horizontal">
      <label>Collection Method</label><br />
        <input type="radio" id="radGrab1" value="Grab" name="Collection1" />
       <label for="radGrab1">Grab</label>
        <input type="radio" id="radEWI1" value="EWI" name="Collection1" />
       <label for="radEWI1">EWI</label></div>
    </div>

  <div class="_100">
   <div class="_40">    
    <label class="analysis-label" for="analysis">Analyte:</label>
     <select class="analysis" id="analysis" name="analysis" data-iconpos="left" data-icon="grid">
      <option>Select</option>
      <option value = "TN">TN</option>
      <option value = "TP,NO2+3">TP,NO2+3</option>
     </select></div>
    <div class="_30">   
     <label class="preserve-label" for="preserve">Preserved</label>
      <select class="select_preserve" id="preserve" name="preserve" data-iconpos="left" data-icon="grid">
       <option>Select</option>
       <option value = "HNO3">HNO&#8323;</option>
       <option value = "H2SO4">H&#8322;SO&#8324;</option>
      </select></div>
    <div class="_30"> 
      <label class="cool-label" for="cool">Cooled</label>
       <select class="select_cool" id="cool" name="cool" data-iconpos="left" data-icon="grid">  
       <option>Select</option>
       <option value = "Ice">Ice</option>
       <option value = "Frozen">Frozen</option>
       <option value = "None">None</option>
      </select></div>
    </div>

   </div>                
  </fieldset>
 </div>   
   <button type="button" data-theme="b" data-icon="plus" id="moreFields" onclick="moreFields()">ADD FIELD BLANK</button>

 <hr /><div id="writeroot"> </div> 

我的 javascript

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

我就是无法让它工作！是因为这个脚本不是jquery吗？似乎不是因为它被隐藏了，因为当我取消隐藏它时，按钮仍然无法添加克隆？我现在正在拔头发。我需要你帮忙！

Answer 1

您是否尝试过类似的方法：

$("#readroot input").clone().appendTo("body"); // Or wherever you want to append them to

而且，是的，不要手动隐藏东西。改用 jQuery 的切换功能：

$("#readroot").toggle(); // Or hide()