设置innerHTML会破坏元素的内容，并从HTML重新构建它。
您需要构建一个单独的DOM树并通过调用appendChild添加它。
例如：

var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);

使用jQuery更容易做到这一点。

第一步：
将jQuery添加到您的头文件中：

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

第二步：
像这样将数据附加（而不是替换）到DIV：

$("#theform_div").append("your_new_html_goes_here");

不要使用innerHTML来创建表单元素。使用innerHTML，您将用新的HTML覆盖旧的HTML，这将重新创建所有元素。相反，您需要使用DOM来创建和追加元素。

示例

function addRadioElement()
{
    var frm = document.getElementById("form_container");
    var newEl = document.createElement("input");
    newEl.type = "radio";
    newEl.name = "foo";
    newEl.value = "bar";
    frm.appendChild(newEl);        
}

在不使用框架（如jQuery，Dojo，YUI）的情况下，最正确的方法是：

var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);

document.getElementById('theform_div').appendChild(div);

innerHTML，虽然大多数浏览器都支持，但不符合标准，因此不能保证工作。

我建议使用jQuery及其append函数。

如果你想像innerHTML一样使用HTML字符串生成元素，一个很好的选择是insertAdjacentHTML函数，它的参数是position：

let newElement = "<div>this is the new stuff</div>";
document.getElementById("theform_div")
.insertAdjacentHTML("beforeend", newElement);

从Mozilla的文档中可以看到，除了速度更快之外，这还解决了您遇到的问题，因为该函数不会重新解析父元素：
insertAdjacentHTML（）方法不会重新解析它正在使用的元素，因此它不会破坏该元素中的现有元素。这避免了序列化的额外步骤，使其比直接的innerHTML操作快得多。
但是，如果你只想添加纯文本，而不是HTML代码，那么有一个类似的函数专门为insertAdjacentText编写：

let newText = "this is the new stuff";
document.getElementById("theform_div")
.insertAdjacentText("beforeend", newText);