添加到 HTML 表单而不丢失 Javascript 中当前表单输入信息

Question

我有一个下拉菜单，它根据所选的选择构建一个表单。因此，如果有人选择“foobar”，它会显示一个文本字段，如果他们选择“cheese”，它会显示单选按钮。然后，用户可以在这些表单中输入数据。唯一的问题是，当他们添加新的表单元素时，所有其余信息都会被删除。我目前使用以下内容添加到表单：

document.getElementById('theform_div').innerHTML = 
    document.getElementById('theform_div').innerHTML + 'this is the new stuff';

如何让它保留表单中输入的内容并将新字段添加到末尾？

Answer 1

设置 innerHTML 会破坏元素的内容并从 HTML 重建它。

您需要构建一个单独的 DOM 树并通过调用 appendChild 添加它。

例如：

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

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

Answer 2

第一步：

将 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");

Answer 3

不要使用 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);        
}

Answer 4

不使用框架（如 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，虽然大多数浏览器都支持，但不符合标准，因此不能保证正常工作。

Answer 5

我建议使用 jQuery 及其 追加函数。

Answer 6

如果您想使用 HTML 字符串生成元素，如 innerHTML 那样，一个不错的选择是 insertAdjacentHTML 函数，及其 position 参数：

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

如您所见 Mozilla 的文档，除了更快之外，这还解决了您遇到的问题因为该函数不会重新解析父元素：

insertAdjacentHTML() 方法不会重新解析正在使用它的元素，因此它不会破坏该元素内的现有元素。这避免了额外的序列化步骤，使其比直接的innerHTML操作快得多。

但是，如果您只想添加纯文本，而不是 HTML 代码，那么有一个类似的函数 专为名为 插入AdjacentText：

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