欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中append(),prepend()与after(),before()的区别

程序员文章站 2022-04-13 14:33:58
通过 jQuery,可以很容易地添加新元素/内容。 添加新的 HTML 内容 一共有四种方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 以下为jQuer ......

通过 jquery,可以很容易地添加新元素/内容。

添加新的 html 内容

一共有四种方法:

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

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

1、jquery append () 方法

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

    例如:

加之前:

jQuery中append(),prepend()与after(),before()的区别

加之后:

jQuery中append(),prepend()与after(),before()的区别

原始:<p>this is a paragraph.</p>

append加完之后:<p>this is a paragraph. <b>appended text</b></p>

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

2、jquery prepend() 方法

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

    例如:

加之前:

jQuery中append(),prepend()与after(),before()的区别

加之后:

 jQuery中append(),prepend()与after(),before()的区别

原始:<p>this is a paragraph.</p>

prepend 加完之后:<p> <b>prepend text</b> this is a paragraph. </p>

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

3、jquery after() 方法

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

    例如:

加之前:

jQuery中append(),prepend()与after(),before()的区别

加之后:

 jQuery中append(),prepend()与after(),before()的区别

原始:<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>");

其代码结构为:

加之前:

jQuery中append(),prepend()与after(),before()的区别

加之后:

 jQuery中append(),prepend()与after(),before()的区别

原始:<p>this is a paragraph.</p>

before加完之后:<b>before</b><p> this is a paragraph. </p> 

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

好啦,这下记住啦,before after在外面加,append prepend 在里面加!