append（），prepend（），after（），before（）

Posted 2021-02-19 wei-jia

jquery是一个平常比较喜欢用的js框架，因为上手比较简单吧，哈哈，下面呢，就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句，分别是append（），prepend（），after（），before（）

append的用法
这个方法的意思是在选中目标的结尾插入内容。举个例子：
<p>hello</p>
1
如果执行下面这个插入语句，上面的语句会变成什么样子

$("p").append("<b>world</b>")
1
执行了这个插入语句会变成

<p>hello<b>world</b></p>
1
也就是说，在插入的结尾标签前插入此内容。

prepend的用法。
顾名思义，跟上面一种用法相反，就是在标签开始的地方插入内容。
还是以上面第一段代码为例子。
$("p").prepend("<b>world</b>")//插入语句

<p><b>world</b>hello</p>//结果
1
2
3
after的用法
这个语句的用法就是在被选元素之后插入内容。
同样以上面的为例子。
$("p").after("<b>world</b>")//插入语句

<p>hello</p><b>world</b>//结果
1
2
3
在选中标签后面插入内容

before的用法
跟after相反，在标签前面插入内容
$("p").before("<b>world</b>")//插入语句

<b>world</b><p>hello</p>//结果
1
2
3
下面把这四种用法的代码放在一块，更容易理解。

<p>hello</p>
$("p").append("<b>world</b>")使用append插入
<p>hello<b>world</b></p>//显示结果

$("p").prepend("<b>world</b>")//使用prepend插入
<p><b>world</b>hello</p>//显示结果

$("p").after("<b>world</b>")//使用after插入语句
<p>hello</p><b>world</b>//显示结果

$("p").before("<b>world</b>")//使用before插入语句
<b>world</b><p>hello</p>//显示结果
————————————————
版权声明：本文为CSDN博主「梁先森-python数据分析师进阶之路」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lzx159951/java/article/details/79097253