如何添加動態表單元素但保留其值（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的文件中

頁