如何使用 JQuery 在空文档中附加 HTML 标签？

Question

我有一个函数，可以将 returns 一个包含 HTML 个元素的列表添加到另一个标签中。此函数应按如下方式调用：

$('#somewhere').append(getElements())

为了测试可行性我写了这个：

var el = $() 

for (u in ['foo', 'bar']) {
    el.append($('<li>').addClass(u).text(u + 'Text'))
}

$('<ul>').append(el).html()

最终我一无所获<ul>。为什么？我的错误在哪里？我怀疑 $() 无法按预期工作，因为如果我改为 var el = $('<div>')，它就会工作。

备注

我本可以使用：

getElementsInto('#somewhere')

但我更愿意：

$('#somewhere').append(getElements())

Answer 1

append appends the given elements to every element in the jQuery set you call it on. $() is an empty jQuery set, so append on it is a no-op. There are no elements to append to. (Also note that you're using the wrong style of loop 遍历一个数组；在你的循环中，u 将是 "0"，然后是 "1"。）另外，在不使用 return 值的情况下调用 .html() 是空操作。

add 将创建一个新的 jQuery 对象并添加以下内容：

var elements = $();

['foo', 'bar'].forEach(function(u) {
    elements = elements.add($('<li>').addClass(u).text(u + 'Text'));
});

var ul = $('<ul>').append(elements);
// then append `ul` somewhere...
ul.appendTo(document.body);

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

...但我想我会构建一个数组中的元素。在你的情况下，因为你的起点是一个数组，你可以使用 map:

var elements = ['foo', 'bar'].map(function(u) {
  return $('<li>').addClass(u).text(u + 'Text');
});

var ul = $('<ul>').append(elements);
// then append `ul` somewhere...
ul.appendTo(document.body);

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

如何使用 JQuery 在空文档中附加 HTML 标签？

How to append HTML tags in empty document with JQuery?

javascript

jquery

elements