jQuery 追加、拼接元素的方法(append、appendTo、html、insertBefore、before、insertAfter、after)
1、append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同
(1) append()方法:
$("#test").append("<p>测试</p>"); //在id为test元素内部末尾插入<p>测试</p>
(2) appendTo()方法:
$("<p>测试</p>").appendTo("#test"); //在id为test元素内部末尾插入<p>测试</p>
2、insertBefore & before & insertAfter & after
(1) insertBefore() & before() 方法 :在被选元素前(元素外部)插入指定内容
$("<p>测试</p>").insertBefore("#test"); //在id为test的元素前插入<p>测试</p>
注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之前。
$("#test").before("<p>测试</p>"); //在id为test的元素前插入<p>测试</p>
(2) insertAfter() & after()方法:在被选元素后(元素外部)插入指定内容
$("<p>测试</p>").insertAfter("#test"); //在id为test的元素后插入<p>测试</p>
注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之后。
$("#test").after("<p>测试</p>"); //在id为test的元素后插入<p>测试</p>
3、html() 方法:设置或返回被选元素的内容
(1) 设置被选元素的内容
$("#test").html("<p>测试</p>"); //将id为test的元素里的内容设置为<p>测试</p>,若元素里面原本有内容,则将原来的内容替换
(2) 返回被选元素的内容
$("p").html(); //返回匹配到的第一个P元素的内容