js中常用追加元素的几种方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild
js中常用追加元素的几种方法,点击下面每个按钮，即可查看效果
附上js代码：
1 <script type="text/javascript">// <![CDATA[ 2 $(function(){ 3 //append(),在父级最后追加一个子元素 4 $(".append").click(function(){ 5 $("#wrap").append("<p class='three'>我是子元素append</p>"); 6 }); 7 8 //appendTo(),将子元素追加到父级的最后 9 $(".appendTo").click(function(){ 10 $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap")); 11 }); 12 13 //prepend(),在父级最前面追加一个子元素 14 $(".prepend").click(function(){ 15 $("#wrap").prepend("<p class='three'>我是子元素prepend</p>"); 16 }); 17 18 //prependTo(),将子元素追加到父级的最前面 19 $(".prependTo").click(function(){ 20 $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap")); 21 }); 22 23 //after(),在当前元素之后追加（是同级关系） 24 $(".after").click(function(){ 25 $("#wrap").after("<p class='siblings'>我是同级元素after</p>"); 26 }); 27 28 //before(),在当前元素之前追加（是同级关系） 29 $(".before").click(function(){ 30 $("#wrap").before("<p class='siblings'>我是同级元素before</p>"); 31 }); 32 33 //insertAfter(),将元素追加到指定对象的后面（是同级关系） 34 $(".insertAfter").click(function(){ 35 $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap")); 36 }); 37 //insertBefore(),将元素追加到指定对象的前面（是同级关系） 38 $(".insertBefore").click(function(){ 39 $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap")); 40 }); 41 }); 42 43 //appendChild(),在节点的最后追加子元素 44 function appChild(){ 45 // 创建p节点 46 var para=document.createElement("p"); 47 // 创建文本节点 48 var node=document.createTextNode("我是子集appendChild新段落。"); 49 // 把文本节点添加到p节点里 50 para.appendChild(node); 51 52 // 查找div1 53 var element=document.getElementById("wrap"); 54 // 把p节点添加到div1里 55 element.appendChild(para); 56 } 57 // ]]></script>
效果：
我是第一个子元素
我是第二个子元素
