从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