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

Question

How do I simply add dynamic form elements but keep their values? on adding an input using my current method it doesn't pass any info typed into the fields (deleted existing: see fiddle at the bottom) I think the problem is how I am adding the new inputs document.getElementById("add_ac").innerHTML += str;

I have found other ways of adding dynamic form elements but they seem overly complicated does anyone know a very simple way of fixing the problem?

If you can't tell I don't code with JS or backend often, really just looking for a clean simple solution. Have looked on google and stack.

Any real help would be great!

<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

Use insertAdjacentHTML as innerHTML += will reinsert all the DOM in the container.

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation.

Position "'beforeend'" : Just inside the element, after its last child.

 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

You need to append new elements instead of just replacing full content. Use .appendChild() function for that:

 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

Hi There use clone method to duplicate form element and insert in parent node. I made changes in your code...

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>

Please see here demo

Must include JQuery file in header of page

Answer 4

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