Javascript，添加输入字段将清空所有其他输入字段

我正在创建一段Javascript代码，您可以在其中创建多个问题和多个答案。问题最多20个。当我单击“添加问题”时，它会添加一个包含两个答案的问题。当我填写一些输入字段并单击“添加问题”时，它会清空我的所有文本字段。这怎么可能

var fields = 0;
var qAmount = 0;
var array = new Array();

function addInput() {
  if (fields != 2) {
    qAmount++;
    var element = document.getElementById('texty');
    element.innerHTML += "" +
      "<label>Question " + qAmount + "</label><span class='field'><input type='text' class='longinput' name='question" + qAmount + "' /></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-1' /> <input type='text' name='answer" + qAmount + "-1'> Answer 1</input></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-2' /> <input type='text' name='answer" + qAmount + "-2'> Answer 2</input></span>" +
      "<div id='a" + qAmount + "'></div><br/>" +
      "<span class='field'><a style='cursor: pointer' onclick='addAnswer(" + qAmount + ")'>Add answer</a></span><br /><br />";
       fields += 1;
       array[qAmount] = 2;
  }
}

var字段=0；
var-qAmount=0；
var数组=新数组（）；
函数addInput（）{
如果（字段！=2）{
qAmount++；
var元素=document.getElementById（'texty'）；
element.innerHTML+=“”+
“问题”+qAmount+“+
“答复1”+
“答复2”+
“
”+
“添加答案

”；
字段+=1；
阵列[qAmount]=2；
}
}

问题是，当您执行element.innerHTML+=。。。您正在对页面上已经存在的内容进行浅拷贝，并将其作为覆盖重新插入。因此，您没有保留已输入的值。您应该做的是将新的dom元素附加到元素

以下是如何从HTML字符串创建元素的链接：

以及如何将它们附加到元素：

类似这样的东西应该可以做到：（可能需要一些调试）

var字段=0；
var-qAmount=0；
var数组=新数组（）；
var元素=document.getElementById（'texty'）；
函数addInput（）{
var div，s；
如果（字段！=2）{
qAmount++；
s=“问题”+qAmount+”+
“答复1”+
“答复2”+
“
”+
“添加答案

”；
div=document.createElement（'div'）；
div.innerHTML=s；
元素。子元素（div）；
字段+=1；
阵列[qAmount]=2；
}
}

哦，我明白了！谢谢我将对此进行研究。我试图找出如何做到这一点，但您说的是“将新的dom元素附加到元素”。我对Javascript有点陌生（我想这是我写过的第二段代码）。。你能往正确的方向推一推吗？像它应该的那样工作！谢谢！我现在明白了。

var fields = 0;
var qAmount = 0;
var array = new Array();
var element = document.getElementById('texty');

function addInput() {
  var div, s;
  if (fields != 2) {
    qAmount++;
    s = "<label>Question " + qAmount + "</label><span class='field'><input type='text' class='longinput' name='question" + qAmount + "' /></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-1' /> <input type='text' name='answer" + qAmount + "-1'> Answer 1</input></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-2' /> <input type='text' name='answer" + qAmount + "-2'> Answer 2</input></span>" +
      "<div id='a" + qAmount + "'></div><br/>" +
      "<span class='field'><a style='cursor: pointer' onclick='addAnswer(" + qAmount + ")'>Add answer</a></span><br /><br />";
       div = document.createElement('div');
       div.innerHTML = s;
       element.appendChild(div);
       fields += 1;
       array[qAmount] = 2;
  }
}