jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）


最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。


[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>js中常用追加元素的几种方法</title>  
  6.         <link rel="stylesheet" href="css/rest.css" />  
  7.         <style>  
  8.             .container {  
  9.                 width: 1200px;  
  10.                 padding: 10px;  
  11.                 margin: 50px auto;  
  12.                 border: 1px solid lightcoral;  
  13.             }  
  14.             #wrap{  
  15.                 border: 1px solid lightseagreen;  
  16.             }             
  17.             .container p{  
  18.                 height: 30px;  
  19.                 line-height: 30px;  
  20.             }  
  21.             .btn-group{  
  22.                 margin-top: 20px;  
  23.             }  
  24.             button{  
  25.                 width: 80px;  
  26.                 height: 32px;  
  27.                 margin-right: 10px;  
  28.                 line-height: 32px;  
  29.                 text-align: center;  
  30.                 border: 0px;  
  31.             }  
  32.         </style>  
  33.     </head>  
  34.     <body>  
  35.         <div class="container">  
  36.             <div id="wrap">  
  37.                 <p class="first">我是第一个子元素</p>  
  38.                 <p class="second">我是第二个子元素</p>  
  39.             </div>  
  40.             <div class="btn-group">  
  41.                 <button class="append">append</button>  
  42.                 <button class="appendTo">appendTo</button>  
  43.                 <button class="prepend">prepend</button>  
  44.                 <button class="prependTo">prependTo</button>  
  45.                 <button class="after">after</button>  
  46.                 <button class="before">before</button>  
  47.                 <button class="appendChild" onclick="appChild()">appendChild</button>  
  48.                 <button class="insertAfter">insertAfter</button>  
  49.                 <button class="insertBefore">insertBefore</button>  
  50.             </div>  
  51.               
  52.         </div>  
  53.           
  54.     </body>  
  55. </html>  
  56. <script src="js/jquery-1.9.1.min.js"></script>  
  57. <script>  
  58.     $(function(){  
  59.         //append(),在父级最后追加一个子元素  
  60.         $(".append").click(function(){  
  61.             $("#wrap").append("<p class='three'>我是子元素append</p>");  
  62.         });  
  63.           
  64.         //appendTo(),将子元素追加到父级的最后  
  65.         $(".appendTo").click(function(){  
  66.             $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));  
  67.         });  
  68.           
  69.         //prepend(),在父级最前面追加一个子元素  
  70.         $(".prepend").click(function(){  
  71.             $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");  
  72.         });  
  73.           
  74.         //prependTo(),将子元素追加到父级的最前面  
  75.         $(".prependTo").click(function(){  
  76.             $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));  
  77.         });  
  78.           
  79.         //after(),在当前元素之后追加（是同级关系）  
  80.         $(".after").click(function(){  
  81.             $("#wrap").after("<p class='siblings'>我是同级元素after</p>");  
  82.         });  
  83.           
  84.         //before(),在当前元素之前追加（是同级关系）  
  85.         $(".before").click(function(){  
  86.             $("#wrap").before("<p class='siblings'>我是同级元素before</p>");  
  87.         });  
  88.           
  89.         //insertAfter(),将元素追加到指定对象的后面（是同级关系）  
  90.         $(".insertAfter").click(function(){  
  91.             $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));  
  92.         });  
  93.         //insertBefore(),将元素追加到指定对象的前面（是同级关系）  
  94.         $(".insertBefore").click(function(){  
  95.             $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));  
  96.         });  
  97.     });   
  98.       
  99.     //appendChild(),在节点的最后追加子元素  
  100.     function appChild(){  
  101.             // 创建p节点  
  102.             var para=document.createElement("p");  
  103.             // 创建文本节点  
  104.             var node=document.createTextNode("我是子集appendChild新段落。");  
  105.             // 把文本节点添加到p节点里  
  106.             para.appendChild(node);  
  107.                
  108.             // 查找div1  
  109.             var element=document.getElementById("wrap");  
  110.             // 把p节点添加到div1里  
  111.             element.appendChild(para);  
  112.     }  
  113. </script>  

以下是单击每个按钮之后的效果。



posted @ 2018-05-30 09:51  星朝  阅读(4583)  评论(0)  编辑  收藏  举报