Javascript 如何使用ajax将文本输入字段附加到表单，而不丢失表单上的用户输入？

我一直在互联网和StackOverflow上寻找解决方案，但还没有找到。我有一个表格开始：

<div class="container_12">
<div id="masthead" class="grid_12">
<br/><h1>Form Builder</h1>      
</div>
<div id="main-content" class="grid_8" style="margin-top:-5px">
    <form action="" id="form" name="form">
        <div id="formbuilder" name="formbuilder">
        <label>Question:</label><input type="text" name="question1" id="question1"/><br/>
        </div>

        <button type="button" onClick="loadXMLDoc()">Add New Question</button>
        <input type="submit" name="submit" id="submit"/>
    </form>
</div>
<div id="sidebar" class="grid_4">
</div>

该javascript从question.php获得一个新的输入字段，这是一个非常简单的php脚本：

   <?
    echo '<label>Question:</label><input type="text" name="question'.$_GET['c'].'" id="question'.$_GET['c'].'"/><br/>';
   ?>

现在，乍一看一切正常。当我按下按钮时，将生成一个新的问题字段并将其附加到表单中。然而，如果我在按下按钮之前在任何问题文本框中都有任何值，那么所有数据都会消失，即使从直觉上看，情况不应该如此。为了增加乐趣，这只发生在Chrome和Firefox中。出于某种原因，Internet Explorer 9按预期工作

---

很明显我做错了什么，但我不知道是什么原因。我已经有一段时间没有使用AJAX了，如果在这方面有任何帮助，我将不胜感激。谢谢

至少在Chrome和Firefox中，您可以使用insertAdjacentHTML来代替innerHTML

document.getElementById("formbuilder").insertAdjacentHTML("beforeend", xmlhttp.responseText)

---

从这里了解更多信息。

至少在Chrome和Firefox中，您可以使用insertAdjacentHTML，而不是使用innerHTML

document.getElementById("formbuilder").insertAdjacentHTML("beforeend", xmlhttp.responseText)

从这里了解更多信息