prepend(content)和append(content)的用法

来源:互联网 发布:刘德华 人物评价 知乎 编辑:程序博客网 时间:2024/06/07 22:08

prepend()方法和append方法基本相同,唯一的区别是prepend()方法添加的内容被放在制定元素的第一个子元素的位置,

而append()是把添加的内容放在最后一个位置

prepend(content)
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式

示例:

向所有段落中前置一些HTML标记代码。

<p>I would like to say: </p> 

$("p").prepend("<b>Hello</b>"); 

结果:

[ <p><b>Hello</b>I would like to say: </p> ] 

将一个DOM元素前置入所有段落

<p>I would like to say: </p><p>I would like to say: </p><b class="foo">Hello</b><b class="foo">Good Bye</b> 

$("p").prepend( $(".foo")[0] ); 

结果:

<p><b class="foo">Hello</b>I would like to say: </p><p><b class="foo">Hello</b>I would like to say: </p><b class="foo">Hello</b><b class="foo">Good Bye</b> 

向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

<p>I would like to say: </p><b>Hello</b> 

$("p").prepend( $("b") ); 

结果:

<p><b>Hello</b>I would like to say: </p> 

append(content)

向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
示例:

向所有段落中追加一些HTML标记。

<p>I would like to say: </p> 

$("p").append("<b>Hello</b>"); 

结果:

[ <p>I would like to say: <b>Hello</b></p> ] 



0 0