添加标签的错误

最新推荐文章于 2024-09-16 23:05:35 发布

尘埃里的微光

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量102

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_71119538/article/details/125899589

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .divlist {
               border: 5px solid red;
               width: 500px;
               height: 500px;
           }

           .div1 {

               height: 20px;
               margin-bottom: 20px;
               width: 100px;
               /* 颜色必须是纯色十六进制色识别不了 */
               border: 2px solid blue;

           }
       </style>
       <script src="js/jquery-3.6.0.js"></script>
       <script>
           $(function() {
               var count=1;
               $("button:eq(0)").click(function() {
                   /* 在添加新的div标签时必须先用变量存放 */
                   var newdiv = $("<div></div>");
                   /* 给div赋予样式不然看不见 */
                   newdiv.addClass("div1");
                   /* 设置div标签的个数 */
                   newdiv.text("第"+count+"个标签")
                   $(".divlist").append(newdiv);
                   count++;

               })
               $("button:eq(1)").click(function() {
                   $(".div1:last").remove();
                   count--;

               })
               $("button:eq(2)").click(function() {
                   $(".divlist").empty();
                   count=1;
               })
           })
       </script>
   </head>
   <body>
       <button>添加元素</button>
       <button>删除元素</button>
       <button>清空子元素</button>
       <div class="divlist"></div>
   </body>
</html>