使用 JavaScript 插入元素的最佳方式答案

【问题标题】：Best Way to Insert An Element With JavaScript使用 JavaScript 插入元素的最佳方式
【发布时间】：2010-01-05 22:29:05
【问题描述】：

我有一个 HTML 表单，它包含几个字段集（每个字段集都相同）。我希望用户能够通过单击按钮 (jQuery) 添加其他字段集。我可以想到两种方法：

单击添加按钮时创建一个虚拟隐藏字段集和clone it。
创建一个函数，在单击 add 按钮时从字符串呈现字段集的 HTML。（该函数知道字段集是一个长字符串。）

这两种方法有什么明显的优点或缺点吗？还有其他方法吗？

我不喜欢虚拟字段集的想法，即使它是隐藏的，但是将整个字段集编码为字符串似乎有点笨拙，尽管我知道这是非常标准的做法。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

即使已经存在的字段集与您要插入的字段集相同，您也可以克隆现有的字段集并清除输入。现在您不必在 HTML 或 Javascript 中有额外的代码 :)

【讨论】：

【解决方案2】：

我过去使用过第一种方法（克隆），除了我实际上使用 JavaScript 从文档中删除了模板块，这样它就不会“挂起”。然后，您可以根据需要通过克隆删除的块并将克隆添加回文档来重复使用模板块。

模板块方法的好处是，您可以将标记保留在 HTML 文档中，这样比在某处编码的 JavaScript 更容易管理和保持更新。

希望这会有所帮助。

【讨论】：

【解决方案3】：

当按下按钮时，您可以使用 DOM 方法从头开始创建一个字段集：

function createFieldset(legendText, prefix) {
    var fieldset = document.createElement("fieldset");
    var legend = fieldset.appendChild( document.createElement("legend") );
    legend.appendChild( document.createTextNode(legendText) );

    var input = document.createElement("input");
    input.type = "text";
    input.name = prefix + "_some_text_field";

    return fieldset;
}

var fieldset = createFieldset("Test fields", "test");
document.forms[0].appendChild(fieldset);

我承认这很冗长，但那是你的 DOM。

【讨论】：

【解决方案4】：

您可以克隆要复制的现有节点，更改适当的属性（如名称），然后将其插入页面。

没有理由克隆一个假人，只需克隆现有的。

【讨论】：

【解决方案5】：

我认为问题在于我想序列化输入 name 属性。否则我会使用隐藏字段集并克隆该字段集，然后获取输入的索引并编写名称属性。

【讨论】：

【解决方案6】：

您可以从异步源加载新的字段集。如果字段集不复杂，这可能有点矫枉过正。

你说字段集都是相同的。如果您使用一个或多个可见字段集加载页面，则可以克隆其中一个，这将避免页面中出现虚拟隐藏字段集。但是，您必须在显示之前清除字段集中的所有数据。

从您的选择中，为了便于维护，我会选择 #1 ——如果您稍后决定调整字段集的格式，在 HTML 中更改它比在笨拙的 JS 字符串中更容易。

【讨论】：

【解决方案7】：

由于您使用的是 jQuery，并且您的字段集是相同的，您可以使用方便的 clone() 函数..

所以你可以这样做

$( 'form' ).append( $('fieldset:eq(0)').clone() );

或以另一个顺序

$('fieldset:eq(0)').clone().appendTo( 'form' );

【讨论】：