js实现增删上下移动

最新推荐文章于 2022-09-14 00:49:58 发布

cdgogo

最新推荐文章于 2022-09-14 00:49:58 发布

阅读量223

点赞数 1

分类专栏： js 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/120353577

版权

本文介绍如何使用JavaScript实现DOM元素的动态增删以及在页面中的上下移动功能，包括具体的代码实现和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>列表的增删和移动</title>
  <style>
    body {
     
      background: #ddd;
      text-align: center
    }

    .list {
     
      display: inline-block;
      margin-top: 20px;
      padding: 40px;
      border-radius: 8px;
      background: #fff;
      color: #333;
      text-align: left;
      font-size: 13px
    }

    .list-ul {
     
      list-style: none;
      margin: 0;
      padding: 0
    }

    .list-option {
     
      padding: 6px 0;
    }

    .list-input {
     
      width: 300px;
      border: 1px solid #ccc;
      padding: 4px;
      font-size: 14px;
      color: #333
    }

    .list-input:hover {
     
      background: #effaff
    }

    .list-btn span {
     
      color: #0065A0;
      ;
      cursor: pointer
    }

    .list-btn span:hover {
     
      text-decoration: underline
    }

    .list-btn b {
     
      text-align: center;
      background-color: #D6EDFF;
      border-radius: 6px;
      width: 20px;
      height: 20px;
      display: inline-block;
      margin: 0 2px;
      cursor: pointer;
      color: #238FCE;
      border: 1px solid #B3DBF8;
      float: left
    }

    .list-bottom <

最低0.47元/天解锁文章