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

q5iwbnjs  于 2023-06-04  发布在  Java
关注(0)|答案(6)|浏览(486)

我有一个下拉菜单,它建立了一个表格的基础上所选择的选择。所以,如果有人选择'foobar',它会显示一个文本字段,如果他们选择'cheese',它会显示单选按钮。然后,用户可以在这些表单中输入数据。唯一的问题是,当他们添加新的表单元素时,所有其余的信息都被删除了。我目前正在使用以下方法添加到表单中:

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

我怎样才能让它保留表单中输入的任何内容,并将新字段添加到末尾?

lc8prwob

lc8prwob1#

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

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

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

yhived7q

yhived7q2#

第一步:
将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");
6uxekuva

6uxekuva3#

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

lskq00tm4#

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

mtb9vblg

mtb9vblg5#

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

ldfqzlk8

ldfqzlk86#

如果你想像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);

相关问题