动态添加输入字段会导致问题 [英] adding input field dynamically causes problems

问题描述

我正在处理html页面，并且在向表单添加新的输入字段时遇到问题。问题是，当添加新字段时，其他输入字段的内容会重新设置。

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

p>

  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> ]。加入（）; 
 
函数addSlotTransition（）{
 document.getElementById（Delta）.innerHTML + = TSLOT.replace（/ _n_ / g，Delta_size ++）; } 
  

我缺少什么？

.innerHTML 时，它会从解析后的 innerHTML 创建一个新的DOM树并重写它，所以在HTML中不存在的东西都会丢失。使用一个实际的追加：

pre $ document.getElementById（Delta）.insertAdjacentHTML（'beforeend'，TSLOT.replace（/ _n_ / g，Delta_size ++））;

JS Fiddle Demo

I'm working on a html page and I have a problem when adding a new input field to the form. The problem is that, the content of the other input fields is resetted when the new field is added.

The code for adding a new input text is the following:

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

Am I missing something?

解决方案

When you use .innerHTML, it creates a new DOM tree from the parsed innerHTML and rewrites it, so everything not present in the HTML is lost. Use a real append:

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

JS Fiddle Demo

这篇关于动态添加输入字段会导致问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！