JQuery动态添加元素方法
|
append() |
在父级最后追加一个子元素 |
|
appendTo() |
在父级最后追加一个子元素 |
| prepend() | 在父级最前面追加一个子元素 |
| prependTo() | 在父级最前面追加一个子元素 |
| after() | 在当前元素之后追加（是同级关系） |
| before() | 在当前元素之前追加（是同级关系） |
| insertAfter() | 将元素追加到指定对象的后面（是同级关系 |
| insertBefore() | 将元素追加到指定对象的前面（是同级关系） |
| appendChild() | 在节点的最后追加子元素 |
根据代码进行分析
1 <body> 2 <div class="container"> 3 <div id="wrap"> 4 <p class="first">我是第一个子元素</p> 5 <p class="second">我是第二个子元素</p> 6 </div> 7 <div class="btn-group"> 8 <button class="append">append</button> 9 <button class="appendTo">appendTo</button> 10 <button class="prepend">prepend</button> 11 <button class="prependTo">prependTo</button> 12 <button class="after">after</button> 13 <button class="before">before</button> 14 <button class="appendChild" onclick="appChild()">appendChild</button> 15 <button class="insertAfter">insertAfter</button> 16 <button class="insertBefore">insertBefore</button> 17 </div> 18 19 </div> 20 21 </body> 22 </html> 23 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> 24 <script> 25 $(function(){ 26 //append(),在父级最后追加一个子元素 27 $(".append").click(function(){ 28 $("#wrap").append("<p class='three'>我是子元素append</p>"); 29 }); 30 31 //appendTo(),将子元素追加到父级的最后 32 $(".appendTo").click(function(){ 33 $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap")); 34 }); 35 36 //prepend(),在父级最前面追加一个子元素 37 $(".prepend").click(function(){ 38 $("#wrap").prepend("<p class='three'>我是子元素prepend</p>"); 39 }); 40 41 //prependTo(),将子元素追加到父级的最前面 42 $(".prependTo").click(function(){ 43 $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap")); 44 }); 45 46 //after(),在当前元素之后追加（是同级关系） 47 $(".after").click(function(){ 48 $("#wrap").after("<p class='siblings'>我是同级元素after</p>"); 49 }); 50 51 //before(),在当前元素之前追加（是同级关系） 52 $(".before").click(function(){ 53 $("#wrap").before("<p class='siblings'>我是同级元素before</p>"); 54 }); 55 56 //insertAfter(),将元素追加到指定对象的后面（是同级关系） 57 $(".insertAfter").click(function(){ 58 $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap")); 59 }); 60 //insertBefore(),将元素追加到指定对象的前面（是同级关系） 61 $(".insertBefore").click(function(){ 62 $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap")); 63 }); 64 }); 65 66 //appendChild(),在节点的最后追加子元素 67 function appChild(){ 68 // 创建p节点 69 var para=document.createElement("p"); 70 // 创建文本节点 71 var node=document.createTextNode("我是子集appendChild新段落。"); 72 // 把文本节点添加到p节点里 73 para.appendChild(node); 74 75 // 查找div1 76 var element=document.getElementById("wrap"); 77 // 把p节点添加到div1里 78 element.appendChild(para); 79 } 80 </script>