javascript - 从jquery对象中取出元素的方法

Question

 $('li').add('<p id="new">new paragraph</p>')
 .css('background-color', 'red');

尽管新段落已经创建并且它的背景颜色发生了变化，但它仍然没有出现在页面上。我可以将它放在页面上的什么或哪种方法/程序。

Answer 1

你做错了。如果要将新段落附加到<li>元素，请使用：

$('<p id="new">new paragraph</p>').css('background-color', 'red').appendTo('li');

Answer 2

使用append代替add

$('li').append('<p id="new">new paragraph</p>')
 .css('background-color', 'red');

Answer 3

我认为这是预期的操作：

$('li').append('<p id="new">new paragraph</p>').css('background-color', 'red');

Answer 4

您遇到的问题是add()没有将元素添加到另一个元素。它将元素添加到 jQuery 集合中。因此，您将该<p>元素添加到 li 元素列表的末尾。比如~[li,li,li,p]

来自add()的 jQuery 文档

。添加（）

.add( selector )Returns: jQuery

描述：将元素添加到匹配元素的集合中。

你想要的是append()

.append()

.append( content [, content ] )Returns: jQuery

说明：将参数指定的内容插入到匹配元素集中每个元素的末尾。

所以你的代码只适用于

$('li').append('<p id="new">new paragraph</p>').css('background-color', 'red');

运行示例：jsFiddle