用js创建或者删除或克隆标签元素

• 创建标签document.querySelector()

 <div class="box1">1</div>
  <script>
    // 查询标签元素
    let box1=document.querySelector(".box1")
    // 创建的这个元素不会渲染到页面上，因为没有在文档树中
  let box2=document.createElement('div')//参数写的是要添加的标签的字符串
  // 添加到文档树中，用appendChild()
  box1.appendChild(box2)//将box2添加为box1的子元素
  </script>

• 删除标签元素

（1）用父元素删除子元素 parentElement.removeChild()//参数写要删除的元素

  <div id="box">
    <div id="box1"></div>
  </div>
  <script>
    let box1 = document.querySelector("#box1")
    box1.parentElement.removeChild(box1) //找到自己的父元素再通过父元素删除自己
  </script>

（2）自己删除自己 remove()

  <div id="box">
    <div id="box1"></div>
  </div>
  <script>
    let box1 = document.querySelector("#box1")
    box1.remove()
  </script>

（3）清空自己

 <div id="box">
    <div id="box1"></div>
  </div>
  <script>
    let box1 = document.querySelector("#box1")
    box1.parentElement.innerHTML=''//让父元素清空自己的内容，适合只用自己这个元素的情况
  </script>

• 克隆 cloneNode() 如果参数写true，表示连同后代元素与事件一起克隆

  <div id="box">
    <div id="box1"><span></span></div>
  </div>
  <script>
    let box1= document.querySelector("#box1")
    let box2=box1.cloneNode()//将box1克隆一份 这种不会克隆box1里面的内容，如span
    box.appendChild(box2)
  </script>

  <div id="box">
    <div id="box1"><span></span></div>
  </div>
  <script>
    let box1= document.querySelector("#box1")
    let box2=box1.cloneNode(true)//将box1克隆一份 这种会克隆box1里面的所以内容，如span
    box.appendChild(box2)
  </script>