jQuery中append(),prepend()与after(),before()四个方法的区别

添加新的 HTML 内容

一共有四种方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
  

以下为jQuery中append(),prepend()与after(),before()四个方法的区别

1、jQuery append () 方法

　　　　jQuery append() 方法在被选元素的结尾插入内容。

　　　　例如：

加之前：

加之后：

原始：<p>This is a paragraph.</p>

append加完之后：<p>This is a paragraph. <b>Appended text</b></p>

append 新加内容在原内容 P标签里面的后面

2、jQuery prepend() 方法

　　　　jQuery prepend() 方法在被选元素的开头插入内容。

　　　　例如：

加之前：

加之后：

原始：<p>This is a paragraph.</p>

prepend 加完之后：<p> <b>Prepend text</b> This is a paragraph. </p>

prepend 新加内容在原内容 P标签里面的前面

3、jQuery after() 方法

　　　　jQuery after() 方法在被选元素之后插入内容。

　　　　例如：

加之前：

加之后：

原始：<p>This is a paragraph.</p>

after加完之后：<p> This is a paragraph. </p> <b>After</b>

after新加内容在原内容 P标签外面的后面

4、jQuery before () 方法

　　　　jQuery before() 方法在被选元素之前插入内容。

　　　　例如：

　　　　$("p").before("<b>Before</b>");

其代码结构为：

加之前：

加之后：

原始：<p>This is a paragraph.</p>

before加完之后：<b>Before</b><p> This is a paragraph. </p>

before新加内容在原内容 P标签外面的前面

好啦，这下记住啦，before after在外面加，append prepend 在里面加！

以上就是本文的全部内容,感谢大家支持JScript之家——编程学习者社区!

$('span') . insertBefore( $('div') ) ;
剪切复制'span'到同级元素'div'前面。
$('span') . before( $('div') ) ;
表示$('span')的前面必须是'div'

$('div') . insertAfter( $('span') );
剪切复制'div'到同级元素'span'后面。
$('div') . before( $('span') ) ;
表示$('div')的前面必须是'span'

$('div') . appendTo( $('span') );
剪切复制'div'到父级元素'span'最后加入。
$('div') . append( $('span') );
表示父级元素$('div')的内容最后面必须是'span'


$('div') .prependTo( $('span') );
剪切复制'div'到父级元素'span'最前加入。
$('div') . prepend( $('span') );
表示父级元素$('div')的内容最前面必须是'span'