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

Posted 2023-05-07

【中文标题】添加到 HTML 表单而不会丢失 Javascript 中的当前表单输入信息

【英文标题】：Add to HTML form without losing current form input information in Javascript

【发布时间】：2011-01-12 15:51:24

【问题描述】：

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

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

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

【参考方案1】：

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

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

例如：

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

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

【参考方案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");

【讨论】：

这对我有用，我必须添加嵌套元素（ 在 中）

【参考方案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);        

【参考方案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 虽然受到大多数浏览器的支持，但不符合标准，因此无法保证正常工作。

【参考方案5】：

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