Question

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

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

这两种方法都有任何明显的优点或缺点吗？还有另一种方式吗？

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

Answer 1

如果已存在的字段集与您要插入的字段集相同，则可以克隆现有字段集并清除输入。现在您不必在HTML 或 Javascript中添加额外的代码：）

Answer 2

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

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

希望这有帮助。

Answer 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。

Answer 4

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

没有理由克隆假人，只是克隆现有的假人。

Answer 5

我认为问题在于我想序列化输入name属性。否则我会选择隐藏的字段集并克隆那个字段集，然后我会得到输入的索引并写下名称属性。

Answer 6

您可以从异步源加载新的字段集。如果字段集不复杂，这可能是过度的。

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

根据您的选择，我会选择＃1以便于维护 - 如果您稍后决定调整字段集的格式，则在HTML中更改它比在非野生的JS字符串中更容易。

Answer 7

由于您使用的是jQuery并且您的字段集完全相同，因此可以使用方便的clone（）函数。

所以你可以做到

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

或其他顺序

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

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

7 个答案: