adding input field dynamically causes problems

Question

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?

• soktinpk: Are the other input fields also in document.getElementById("Delta")? If so, this would explain the problem: you're replacing all the input fields so their content is reset.

Answer 1

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

• optimusfrenk: Now I understand the issue. Ooooh yeah now it works!!