добавлять дополнительные поля при сохранении содержимого ввода

Question

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

function addInput(){ 
     var inpts = document.getElementById("inputs"); 
     var inputCounter = Number(document.getElementById("inputCounter").innerHTML); 
     var incCount = inputCounter+1; 
     var currentInfo = inpts.innerHTML; 
     var newField = "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />"; 

     inpts.innerHTML = currentInfo + newField; 
     document.getElementById("inputCounter").innerHTML = incCount; 
    } 

Вызов функции выглядит следующим образом ...

<div style="display: none;" id="inputCounter">1</div> 
    <div id='inputs'> 
      <textarea id='1' rows="2" onblur="updatePreview()"></textarea> <div onclick="addInput()" style="display: inline-block;">XX</div><br /> 
    </div> 

Answer 1

innerHTML возвращает структуру HTML, но это исключает свойство значения элементов формы (например, textarea).

Вместо этого, вы можете создать новый элемент для хранения дополнительного поля, а затем добавить этот элемент в inputs:

function addInput(){ 
    var inpts = document.getElementById("inputs"), 
     inputCounter = Number(document.getElementById("inputCounter").innerHTML), 
     incCount = inputCounter+1, 
     div = document.createElement('div'); 

    div.innerHTML= "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />"; 
    inpts.appendChild(div); 
    document.getElementById("inputCounter").innerHTML = incCount; 
} //addInput 

Working Fiddle

---

Альтернативой созданию нового элемента является использование insertAdjacentHTML:

function addInput(){ 
    var inpts = document.getElementById("inputs"), 
     inputCounter = Number(document.getElementById("inputCounter").innerHTML), 
     incCount = inputCounter+1; 

    inpts.insertAdjacentHTML(
    'beforeend', 
    "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />" 
); 

    document.getElementById("inputCounter").innerHTML = incCount; 

} //addInput 

Working Fiddle #2