原生js小练习

CSS样式

 <style>
      .top {
        margin-top: 30px;
        width: 260px;
        height: 30px;
        margin-bottom: 40px;
      }
      .mark {
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        float: left;
        height: 20px;
        width: 55px;
        background-color: rgb(255, 226, 192);
        margin-right: 10px;
      }
    </style>

HTML代码块

 <div id="contains">
      <!-- 动态创建四个盒子 -->
      <div class="top"></div>
      <!-- 创建四个按钮-->
      <div class="bottom">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
      </div>
    </div>

js代码部分

  <script>
      // 要求：当点击button按钮时,根据按钮内容动态创建出节点。
      // 获取所有的button元素节点
      var btn = document.querySelectorAll('button')
      // 获取类名为top的元素节点
      var _top = document.querySelector('.top')
      // 创建一个数组，接收点击事件的值
      var arr = []
      // 这里使用let声明i，因为点击事件是异步的
      // 循环
      for (let i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
          //每次添加元素节点之前，先把前面创建的清空
          _top.innerHTML = ''
          // 点击哪个btn，就获得它的内容保存到数组中
          arr[i] = btn[i].innerHTML

          // 遍历保存在数组中元素
          arr.forEach((value, index) => {
            // 如果数组中有元素，就在_top中创建节点
            if (value) {
              var divNode = document.createElement('div')
              divNode.className = 'mark'
              divNode.innerHTML = value
              var aNode = document.createElement('a')
              aNode.innerHTML = '&nbspX'
              aNode.setAttribute('index', index)
              divNode.appendChild(aNode)
              _top.appendChild(divNode)
            }
          })

          // 点击X，删除元素
          // 获取所有的增加的a标签
          var aNodes = document.querySelectorAll('.mark a')
          for (let n = 0; n < aNodes.length; n++) {
            aNodes[n].onclick = function () {
              var idx1 = this.getAttribute('index')
              // 将数组中相应元素值设置为空，不然元素会一直在数组中
              arr[idx1] = ''
              // 删除当前元素的父节点
              _top.removeChild(this.parentNode)
            }
          }
        }
      }
    </script>