Jquery添加元素，各个方法及区别

不要再搞混了！！！！
接下来的例子以这个代码为基础

<p>hello</p>

$("p").append("<b>world</b>")  //插入语句

<p>hello<b>world</b></p>  //结果

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

<p><b>world</b>hello</p>    //结果

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

<p>hello</p><b>world</b>//结果

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

<b>world</b><p>hello</p>//结果

append ：前面是指定的元素，后面面是要新插入的内容

appendTo : 前面是要新插入的内容 , 后面是指定的元素

(1) append()方法：

$("p").append("<span>测试</span>");  

<p>hello<span>测试</span></p> //结果

(2) appendTo()方法：

$("<span>测试</span>").appendTo("p");   

<p>hello<span>测试</span></p> //结果

insertAfter & insertBefore：前面是要新插入的内容 , 后面是指定的元素

after & before：前面是指定的元素，后面面是要新插入的内容

(1) insertBefore() & before() 方法：在被选元素前（元素外部）插入指定内容

$("<span>测试</span>").insertBefore("p"); 

<span>测试</span><p>hello</p> //结果

注：如果指定内容是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。

$("p").before("<span>测试</span>"); 

<span>测试</span><p>hello</p> //结果

(2) insertAfter() & after()方法：在被选元素后（元素外部）插入指定内容

 $("<span>测试</span>").insertAfter("p"); 

<p>hello</p><span>测试</span>  //结果

注：如果指定内容是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之后。

$("p").after("<span>测试</span>"); 

<p>hello</p><span>测试</span>  //结果

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。