9

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

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

我怎样才能让它保留表单中的所有内容并将新字段添加到末尾？

4

5 回答 5

15

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

您需要构建一个单独的 DOM 树并通过调用appendChild.

例如：

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

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

于 2010-02-03T14:53:15.383 回答
5

第一步：

将 jQuery 添加到您的标题中：

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

第二步：

像这样将数据附加到您的 DIV 中，而不是替换：

$("#theform_div").append("your_new_html_goes_here");
于 2010-02-03T14:56:48.127 回答
2

不要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);        
}
于 2010-02-03T14:53:51.387 回答
2

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

于 2010-02-03T14:56:13.010 回答
0

我建议使用jQuery及其append功能。

于 2010-02-03T14:52:47.960 回答