添加到 innerHTML 而不破坏表单内容

Posted 2023-03-05

【中文标题】添加到 innerHTML 而不破坏表单内容

【英文标题】：Add to innerHTML without destroying form contents

【发布时间】：2011-11-11 11:13:04

【问题描述】：

我有一个基于多文件上传器 (swfupload) 通过 ajax 生成的表单。在完成每个上传的文件后，它会向给定的 dom 元素添加更多表单元素。因此，这给了我一个问题。如果我选择了 5 个文件上传，第一个文件将生成一个表单，我将开始在其中输入数据，但是，当第二个文件完成上传时，它会清除表单元素中先前输入的数据并附加第二个表单元素.

我认为这是因为我正在使用：

document.getElementById('test').innerhtml = document.getElementById('test').innerHTML + newformelements;

我认为执行上述操作不会在表单中保留任何输入的数据，只会保留 HTML 本身。

那么，我怎样才能在不破坏已经放入表单字段的内容的情况下附加到这个元素呢？可能的孩子的数量是基于多上传者的动态。

【问题讨论】：

你不会相信这一点，但实际上有针对 :P 的 DOM 操作函数，不要使用 innerHTML - 应该避免通过 innerHTML 重新创建 DOM！

我认为您误会了 innerHTML 的用途。您是否需要根据新数据动态扩展的某种表格？

@David Depends... 所有这些表单是否相同（在这种情况下，您可以克隆现有的模板表单）？您从哪里获得表单的 HTML 源代码？它是否被硬编码到网页本身的 HTML 源代码中？

见***.com/a/9851500/753129

【参考方案1】：

你愿意使用 jquery 吗？如果是，那么您可以轻松地做这样的事情

$("#divid").append("html you want to append");

【参考方案2】：

使用 DOM 操作，在本例中：Node.appendChild ^[docs]。

innerHTML 将总是销毁并重新创建元素。

【参考方案3】：

创建一个新元素，设置它的 innerHTML，然后将其附加到表单子元素的末尾。