1、append()方法：向每个匹配的元素内部添加元素
appendTo()方法：将所有匹配的元素追加的指定的元素中
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery选择器</title> </head> <body> <ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>梨</li> </ul> </body> <script type="text/javascript"> var $li1=$("<li>柚子</li>"); $("ul").append($li1);
var $li2=$("<li>哈密瓜</li>");
$li2.appendTo("ul");
</script> </html>
2、prepend()方法：向所有匹配的元素前面添加新的元素
prependTo()方法：将元素添加到指定元素的前面
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery选择器</title> </head> <body> <ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>梨</li> </ul> </body> <script type="text/javascript"> var $p=$("<p>请选择你喜欢的水果</p>"); $("ul").prepend($p);
$p.prependTo("ul"); </script> </html>
3、after()：在每个匹配的元素之后添加元素
insertAfter()：将元素插入到指定元素的后面
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery选择器</title> </head> <body> <p>请选择你喜欢的水果</p> <ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> <li>梨</li> </ul> </body> <script type="text/javascript"> var $b=$("<b>您的选择是</b>"); $("p").after($b); $b.insertAfter("p"); </script> </html>
4、before() 在匹配的元素之前添加元素，效果同prepend()
insertBefore() 将元素添加到指定元素之前，效果同prependTo()