如何添加动态表单元素但保留其值（JS）

Question

如何简单地添加动态表单元素但保留其值？ 使用我当前的方法添加输入时，它不会将键入的任何信息传递到字段中（删除现有信息：请参阅底部的小提琴）。我认为问题是我如何添加新输入document.getElementById("add_ac").innerHTML += str;

我发现了添加动态表单元素的其他方法，但它们似乎过于复杂，有人知道解决此问题的简单方法吗？

如果您不能告诉我我不经常使用JS或后端进行编码，那么实际上只是在寻找一种干净简单的解决方案。 看过谷歌和堆栈。

任何真正的帮助都将很棒！

<div id="add_ac">
  <input type="text" name="c[]" placeholder="Add comment..."/><br />
</div>
<button id="add_ac_btn">+</button>

<div id="add_ai">
  <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />
</div>  
<button id="add_ai_btn">+</button>

JS

document.getElementById('add_ac_btn').onclick = function add_new_ac(){
  var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />';
  document.getElementById("add_ac").innerHTML += str;
}

document.getElementById('add_ai_btn').onclick = function add_new_ai(){
 var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />';
document.getElementById("add_ai").innerHTML += str;


}

js小提琴： https : //jsfiddle.net/fsdbpxoo/

Answer 1

使用insertAdjacentHTML作为innerHTML +=将所有DOM重新插入容器中。

insertAdjacentHTML()将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。 它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。 这样，避免了额外的序列化步骤，使其比直接的innerHTML操作快得多。

位置“'beforeend'” ： 在元素的最后一个子元素之后。

 document.getElementById('add_ac_btn').onclick = function add_new_ac() { var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />'; document.getElementById("add_ac").insertAdjacentHTML("beforeend", str); } document.getElementById('add_ai_btn').onclick = function add_new_ac() { var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />'; document.getElementById("add_ai").insertAdjacentHTML("beforeend", str); } 

 <div id="add_ac"> <input type="text" name="c[]" placeholder="Add comment..." /> <br /> </div> <button id="add_ac_btn">+</button> <div id="add_ai"> <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" /> <input type="text" name="cai[]" placeholder="Add comment..." /> <br /> </div> <button id="add_ai_btn">+</button> 

Answer 2

您需要添加新元素，而不仅仅是替换整个内容。 .appendChild()使用.appendChild()函数：

 document.getElementById('add_ac_btn').onclick = function add_new_ac() { var wrapper = document.getElementById('add_ac'); var newInput = document.createElement('input'); newInput.type = 'text'; newInput.name = 'c[]'; newInput.placeholder = 'Add comment...'; wrapper.appendChild(newInput); wrapper.appendChild(document.createElement('br')); } document.getElementById('add_ai_btn').onclick = function add_new_ac() { var wrapper = document.getElementById('add_ai'); var newInput = document.createElement('input'); newInput.type = 'text'; newInput.name = 'tai[]'; newInput.placeholder = 'Add triggers, separated by commas'; wrapper.appendChild(newInput); var newInput = document.createElement('input'); newInput.type = 'text'; newInput.name = 'cai[]'; newInput.placeholder = 'Add comment...'; wrapper.appendChild(newInput); wrapper.appendChild(document.createElement('br')); } 

 <div id="add_ac"> <input type="text" name="c[]" placeholder="Add comment..." /> <br /> </div> <button id="add_ac_btn">+</button> <div id="add_ai"> <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" /> <input type="text" name="cai[]" placeholder="Add comment..." /> <br /> </div> <button id="add_ai_btn">+</button> 

Answer 3

您好，请使用克隆方法来复制表单元素并插入父节点中。 我对您的代码进行了更改...

的HTML

<div id="add_ac">
  <div id="duplicater">
    <input type="text" name="c[]" placeholder="Add comment..."/>
  </div>
</div>
<button id="add_ac_btn">+</button>

<div id="add_ai">
  <div id="duplicetorSec">
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> 
    <input type="text" name="cai[]" placeholder="Add comment..."/>
  </div>
</div>  
<button id="add_ai_btn">+</button>

JS代码：

<script>
var i = 0;
var k = 0;
var original = document.getElementById('duplicater');
var originalSec = document.getElementById('duplicetorSec');

function duplicate(){
  var clone = original.cloneNode(true); // "deep" clone
  i = ++i;
  clone.id = "duplicetor"+ i; // there can only be one element with  an ID
  original.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function duplicateSec(){
  var clone = originalSec.cloneNode(true); // "deep" clone
  console.log(clone);
  k = ++k;
  clone.id = "duplicetorSec"+ k; // there can only be one element with  an ID
  originalSec.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function clearCloneElement(id){ 
  var divId = '#'+id;
  $(divId).find("input[type^='text']").each(function() {
    $(this).val('');
  });
}
document.getElementById('add_ac_btn').onclick = function add_new_ac(){
  duplicate();
}
document.getElementById('add_ai_btn').onclick = function add_new_ac(){
    duplicateSec();
}
</script>

请看这里演示

页面标题中必须包含JQuery文件

Answer 4

您应该尝试使用JQuery的append（）方法或采用普通JS的方式构造一个节点，然后使用appendChild（）添加它。