Входные значения Maintaing в динамически генерируемых полях

Question

У меня есть следующий JavaScript, который динамически генерирует текстовые входы и вставляет их в div. Этот код работает нормально, но если я ввожу текст в поле, затем нажмите кнопку, чтобы добавить другое поле, я потеряю текст, который я напечатал в первом поле.

Я сделал jFiddle - но по какой-то причине он не работает. Тем не менее, тот же код отлично работает в моем браузере.

Вот функция вопрос:

var optCount = 0; 
function addOption(type){ 
    var cont = document.getElementById('new'+type+'Opts'); 
    cont.innerHTML = cont.innerHTML + "<span style='display:block;' id='opt" + optCount + "'><input type='text' style='width:80%;' /><a href='#' style='color:red; text-decoration:none; font-size:.6em;' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br /></span>"; 
    optCount++; 
    return false; 
} 

Как я могу сохранить значения существующих полей при добавлении дополнительных полей?

Answer 1

Не заменяйте все содержимое div каждый раз. Вместо этого просто создайте новый параметр и добавьте его.

var cont = document.getElementById("new"+type+"Opts"); 
var span = document.createElement('span'); 
span.className = 'block'; 
span.id = "opt" + optCount; 
span.innerHTML = "<input type='text' class='width80' /><a href='#' class='dellink' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br />"; 
optCount++; 
cont.appendChild(span); 

http://jsfiddle.net/ExplosionPIlls/PBp4g/5/