javascript - 在保留输入内容的同时添加附加字段

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 结构，但不包括表单元素的 value 属性(例如 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