插件窝 干货文章 JQuery添加元素

JQuery添加元素

jquery 添加元素 832    来源:插件窝    2019-12-20

JQuery添加元素

之前只知道 append() 添加元素,但好像只能添加在内部,今天遇上了总结一下。


(append,prepend,after,before四种方法区别对比)

jquery添加元素一共有四个语句,分别是 append(),prepend(),after(),before()


append的用法

意思是在选中目标的结尾插入内容。举个例子:

<p>hello</p>

进行append操作


$("p").append("<b>world</b>")
<p>hello<b>world</b></p>

也就是说,在插入的结尾标签前(内部)插入内容。


prepend的用法

顾名思义,跟上面一种用法相反,就是在标签开始的地方插入内容。

$("p").prepend("<b>world</b>")  //插入语句
<p><b>world</b>hello</p>    //结果

after的用法

这个语句的用法就是在被选元素之后插入内容。

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

在选中标签后面(外部)插入内容


before的用法

跟after相反,在标签前面插入内容


$("p").before("<b>world</b>")   //插入语句
<b>world</b><p>hello</p>    //结果