jQuery之添加元素

最新推荐文章于 2023-06-09 17:40:08 发布

Andone_hsx

最新推荐文章于 2023-06-09 17:40:08 发布

阅读量946

点赞数 1

分类专栏： JavaScript基础文章标签： jQuery DOM操作添加元素

本文链接：https://blog.csdn.net/Andone_hsx/article/details/84947019

版权

JavaScript基础专栏收录该内容

19 篇文章 8 订阅

订阅专栏

任务描述

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

相关知识

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

基本的html结构如下：

<button class="btn1">添加内容 </button>
<button class="btn2">添加内容 </button>
<div class="box">
<h3>jquery可以链式调用</h3>
</div>

效果如下：

元素内添加

需要实现的效果如下：

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

$(".btn1").click(function(){
$(".box").prepend("<p>头部添加内容</p>")
})
$(".btn2").click(function(){
$(".box").append("<p>尾部添加内容</p>")
})

可以看出：

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

元素外添加

需要实现的效果如下：

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

$(".btn1").click(function(){
$(".box").before("<p>头部添加内容</p>")
})
$(".btn2").click(function(){
$(".box").after("<p>尾部添加内容</p>")
})

可以看出：

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

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

编程要求

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

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

格式注意：

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

效果如下：

<!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>