jQuery之添加元素

野性酷女 2022-04-05 04:38 307阅读 0赞

任务描述

本关任务：用jQuery添加元素。效果如下：

![206605][]

相关知识

为了完成本关任务，你需要掌握：1.`append(),prepend()`，2.`before(),after()`。

基本的html结构如下：

1.  `<button class="btn1">添加内容 </button>`
2.  `<button class="btn2">添加内容 </button>`
3.  `<div class="box">`
4.  `<h3>jquery可以链式调用</h3>`
5.  `</div>`

效果如下：

![206581][]

元素内添加

需要实现的效果如下：

![206582][]

如何给类名为`box`的元素添加内容呢？ 这里介绍两个方法：`append()`和`prepend()`，实现代码如下：

1.  `$(".btn1").click(function(){`
2.  `$(".box").prepend("<p>头部添加内容</p>")`
3.  `})`
4.  `$(".btn2").click(function(){`
5.  `$(".box").append("<p>尾部添加内容</p>")`
6.  `})`

可以看出：

*  `append()`在被选元素的结尾插入内容；
 *  `prepend()`在被选元素的头部插入内容；

元素外添加

需要实现的效果如下：

![206601][]

如何实现上面效果呢？ 这里介绍两个方法：`before()`和`after()`，实现代码如下：

1.  `$(".btn1").click(function(){`
2.  `$(".box").before("<p>头部添加内容</p>")`
3.  `})`
4.  `$(".btn2").click(function(){`
5.  `$(".box").after("<p>尾部添加内容</p>")`
6.  `})`

可以看出：

*  `before()`在被选元素之前插入内容；
 *  `after()`在被选元素之后插入内容；

注意：要和 `append()`,`prepend()`区分开来。

编程要求

根据提示，在右侧编辑器补充代码，实现添加元素的功能。要求如下：

*  在表格的下面添加按钮【添加内容】，把内容`<button class="btn">添加内容</button>`赋值给变量`addBtn`，添加变量即可；
 *  完成`loadData()`函数，实现加载Dom的功能；
 *  给这个按钮添加点击事件，当点击时，调用`loadData()`；

格式注意：

*  获取元素统一用**类名**获取；
 *  统一用双引号`""`表示字符串，注意单引号和双引号的嵌套，类名用双引号；

效果如下：

![206605][]

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Document</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
      <style>
       button{
        margin-top:20px;
       }
      </style>
    </head>
    <body>
       <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
      <tr id="tb-head">
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>住址</th>
      </tr>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td>30</td>
        <td>洛杉矶</td>
      </tr>
      <tr>
        <td>3</td>
        <td>丽丽</td>
        <td>女</td>
        <td>24</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>4</td>
        <td>王五</td>
        <td>男</td>
        <td>26</td>
        <td>河南</td>
      </tr>
    </table>
        <script>    
        $(function(){
          var count = 4;        
          //---------表格下面添加【添加内容】按钮------------- 
            var addBtn ='<button class="btn">添加内容</button>'
            $(".tab).after(addBtn);
          //------------------- End --------------------------
           function loadData(){
              for(var i =0; i<2; i++){
                count ++;
                 var tr = '<tr>' +
                      '<td>' + count + '</td>'+
                      '<td>王五</td>'+
                      '<td>男</td>'+
                      '<td>26</td>'+
                      '<td>河南</td>'+
                    '</tr>';
                  
             //---------表格底部添加内容------------
                 $(".tab").append(tr); 
             //------------------- End -------------
    
              }
              
           }
            
            //-------------点击事件-----------------
            $(".btn").click(function(){
                loadData();
            })
           //------------------- End ---------------
        })
          
          
     
        </script>
        
    </body>
    </html>

[206605]: https://educoder.trustie.net/attachments/download/206605
[206581]: https://educoder.trustie.net/attachments/download/206581
[206582]: https://educoder.trustie.net/attachments/download/206582
[206601]: /images/20220405/fc649943187e4b5290484f8854967925.png