zoukankan      html  css  js  c++  java

  • 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.                  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.                  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>  

    以下是单击每个按钮之后的效果。
  • 相关阅读:
    【每日一题】16.Treepath (LCA + DP)
    M-SOLUTIONS Programming Contest 2020 游记 （AB水题，CD模拟，E题DFS）
    关于“Github上传以及Clone时发生的 Failed to connect to github.com port 443: Timed out 问题解法记录
    【离散数学】学习笔记目录
    【每日一题】15.Xorto （前缀和枚举）
    【动态规划】动态规划基础 （OI wiki）
    【每日一题】14.Accumulation Degree（树形DP + 二次扫描）
    AtCoder Beginner Contest 199 游记（AB水题，C字符串操作，D搜索，E状压）
    JXUST_NC
    LinkedList源码阅读笔记
  • 原文地址：https://www.cnblogs.com/jpfss/p/9109273.html
Copyright © 2011-2022 走看看