Question

我在html页面上工作，在向表单添加新输入字段时遇到问题。问题是，添加新字段时，将重置其他输入字段的内容。

添加新输入文本的代码如下：

var TSLOT = 
[   "<div id=\"TSLOT_n_\">",
    "From: <input type=\"text\" id=\"from_n_\" autocomplete=\"off\">",
    "By letter: <input type=\"text\" id=\"letter_n_\" autocomplete=\"off\">",
    "To: <input type=\"text\" id=\"to0-_n_\" autocomplete=\"off\">",
    "<input type=\"text\" id=\"to1-_n_\" autocomplete=\"off\">",
    "<BR></div>" ].join("");

function addSlotTransition() { 
document.getElementById( "Delta" ).innerHTML += TSLOT.replace( /_n_/g, Delta_size++ ); }

我错过了什么吗？

Answer 1

当您使用.innerHTML时，它会从已解析的 innerHTML 创建一个新的DOM树并重写它，因此HTML中不存在的所有内容都将丢失。使用真正的附加：

 document.getElementById( "Delta" ).insertAdjacentHTML( 'beforeend', TSLOT.replace( /_n_/g, Delta_size++ ) );

动态添加输入字段会导致问题

1 个答案:

JS Fiddle Demo