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 fiddle：https://jsfiddle.net/fsdbpxoo/

Answer 1

使用insertAdjacentHTML，因为innerHTML +=会重新插入容器中的所有DOM。

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

位置＆＃34;＆＃39;之前＆＃39;＆＃34; ：就在元素内部，在其最后一个孩子之后。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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'));
}

＆＃13;

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

＆＃13;

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 CODE：

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

请参阅here demo

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

Answer 4

您应该尝试使用JQuery的append（）方法或者使用vanilla JS的方式构建一个节点，然后使用appendChild（）来添加它。

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

4 个答案: