如何添加动态表单元素但保留其值（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; 


} 

爵士小提琴：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()功能为：

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

你应该尝试使用jQuery的append（）方法或去香草JS的方式，构建一个节点上，然后使用appendChild（）来添加。

Answer 4

您好有使用克隆方法来复制表格元件和在父节点中插入。我在您的代码中进行了更改...

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> 

请参阅here demo

必须包括JQuery的文件中

页