JS-Web-API —— DOM增删改查

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM增删改查</title>
  </head>
  <body>
    <section id="SEC1"></section>
    <script type="text/javascript">
      // 通过元素id来查找元素
      const sec1 = document.getElementById(SEC1)

      // 创建一个元素
      const span = document.createElement(span)
      span.className = class-span
      let spanText = document.createTextNode(this is span)
      span.appendChild(spanText)

      // 将span添加到sec1中
      sec1.appendChild(span)

      // 替换元素
      const div1 = document.createElement(div)
      div1.id = ID_Div1
      div1.className = class-div1
      div1.innerHTML = this is div1
      sec1.replaceChild(div1, span)

      // 循环插入元素
      // 创建一个文档片段,此时还没有插入到DOM树中
      const div2 = document.createElement(div)
      div2.id = ID_Div2
      div2.className = class-div2
      sec1.appendChild(div2)
      const frag = document.createDocumentFragment()
      for (let i = 1; i <= 6; i++) {
        let p = document.createElement(p)
        p.className = class-p
        p.innerHTML = `this is p${i}`
        frag.appendChild(p)
      }
      // 都完成后,再插入到 DOM 树中
      div2.appendChild(frag)

      // 删除元素
      const pList = document.getElementsByClassName(class-p)
      div2.removeChild(pList[pList.length - 1])
    </script>
  </body>
</html>

 

 

JS-Web-API —— DOM增删改查

上一篇:h264手动添加sps和pps到AVCodecContext->extradata


下一篇:赛元单片机SC92F732x系列eeprom毒蝎操作[以7321为例]