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

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

添加新的 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 在里面加！

转载于:https://www.cnblogs.com/howareyou099/p/10136949.html