代码之家 › 专栏 › 技术社区 › nowox

如何用jquery在空文档中追加html标记?

elements jquery javascript

nowox · 技术社区 · 6 年前

我有一个函数,它返回要添加到另一个标记的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())

1 回复 | 直到 6 年前

T.J. Crowder 6 年前

append 将给定元素追加到您调用它的jquery集中的每个元素。 $() 是一个空的jQuery集,所以 追加 上面是一个no-op,没有要附加的元素。(还要注意,您正在使用 wrong style of loop 在数组中循环;在循环中, u 将 "0" 然后 "1" )还有,打电话 .html() 不使用返回值是一个no-op。

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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前