如何创建一个空的 JQuery 元素并填充它？答案

【问题标题】：How to create an empty JQuery element and populate it?如何创建一个空的 JQuery 元素并填充它？
【发布时间】：2018-08-06 07:18:02
【问题描述】：

我需要创建一个空的 JQuery 元素作为循环的外部范围列表，例如：

const forms_data = ['Name', 'Email'];

const form = $();
for (const input_name of forms_data){
  form.insertAfter(`<input placeholder="${input_name}" / >`)
  form.append(`<input placeholder="${input_name}" / >`)
  form.after(`<input placeholder="${input_name}" / >`)
}

$('form').append(form);

但是根据这里的其他答案，向其中插入新元素的任何方法都不适合我，$() 似乎是正确的方法。

我不想要一个外部 div，我希望所有插入的元素都是兄弟。

我做错了什么？

jsFiddle : https://jsfiddle.net/Lusfektu/16/

【问题讨论】：

没有必要为此使用 $()。您可以将所有元素推送到 [] 并将其添加到末尾。我对你为什么在 for 循环中使用不同的方法有点感兴趣。
@Taplar 只是不同的尝试，没有一个奏效
@Taplar 你的列表解决方案似乎非常适合我的上下文，你能说明它是如何完成的吗？

标签： javascript jquery ecmascript-6

【解决方案1】：

你应该像$('<form>) 这样创建表单元素，然后你可以使用append 方法。

const forms_data = ['Name', 'Email'];
const form = $('<form>');

forms_data.forEach(name => {
  form.append($('<input>', {placeholder: name}))
})

$('body').append(form);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

更新：您可以使用reduce 来创建输入数组或 jquery 对象，然后将该数组一次附加到表单元素。

const forms_data = ['Name', 'Email'];

const inputs = forms_data.reduce((r, name) => {
  r.push($('<input>', {placeholder: name}))
  return r;
}, [])

$('form').append(inputs)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=""></form>

【讨论】：

我明白，但在我的上下文中，表单元素在页面上已经是静态的，我正在追加它，所以没有应该创建的外部 div。
@Mojimi 如果您在 HTML 中有 form 元素，那么只需选择它并将输入附加到它，就像这样 jsfiddle.net/Lusfektu/15
@NenadVracar 但随后它们将被一一呈现，我希望它们一次全部显示
这个例子正在创建一个分离的表单元素，$('<form>')。在附加之前，它不会在页面上可见。使用这个分离的表单，它将所有元素添加到其中，然后将表单放在页面上。因此，它们会按照您的要求同时出现。
@Taplar 实际上我虽然他正在选择页面上已经存在的表单元素

【解决方案2】：

如果您要做的只是创建输入并将它们附加到表单中，您可以使用简单的数组或映射元素。 $.map 可用于循环数组，创建新元素，并在最后将它们作为列表返回。使用它我们可以创建数组，然后将它们一次全部附加到表单中。

const forms_data = ['Name', 'Email'];

$('form').append($.map(forms_data, function(element){
  return `<input placeholder="${element}" / >`;
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form></form>

【讨论】：

虽然我没用过地图，但这最适合我的上下文
map 是一个捷径，而您必须创建数组然后推送到它。它消除了锅炉镀层。

【解决方案3】：

您使用$() 是对的，但这些API 不起作用。而是使用.add():

form = form.add($(`<input placeholder="${input_name}" / >`));

正如其他答案所述，如果您将元素初始化为 <form> 元素，那么您可以使用其他 API，但如果您已经在页面上获得了 <form>，那么这将是有问题的。在这种情况下，您可以将容器初始化为无害的东西，例如 <div> 或 <span>。

【讨论】：

添加返回一个新对象

【解决方案4】：

应该这样做：

const form = $('<form>');

然后像在示例的第二行中那样简单地使用append。

【讨论】：