js创建、添加、插入、删除dom元素

最新推荐文章于 2024-08-11 00:22:53 发布

拿了橘子跑666

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量2.5k

点赞数

分类专栏：前端开发 Javascript 文章标签： js的dom操作

本文链接：https://blog.csdn.net/qq_42804737/article/details/99833107

版权

前端开发同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Javascript

6 篇文章 0 订阅

订阅专栏

创建dom元素：document.creatElement(domName)
创建文本节点：document.creatTextNode(textContent)
添加：obj.append(newDom)
内部添加：parentDom.appendChild(chileDom)
插入：parentDom.insertBefore(newDom, oldChildDom)
删除：parentDom.remove(childDom)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  #div-1{
    background-color: pink;
  }
  #div-2{
     background-color: green;
  }
  #div-3{
     background-color: orange;
  }
</style>
<body>
  <div id="div-1">
    <div class="div-1-child">111</div>
    <div class="div-1-child">222</div>
    <div class="div-1-child">333</div>
    <div class="div-1-child">444</div>
    <div class="div-1-child">555</div>
    <div class="div-1-child">666</div>
  </div>
  <div id="div-2">22</div>
  <div id="div-3">33</div>

  <button id="append">创建后添加</button>
  <button id="insertBefore">创建后插入</button>
  <button id="remove">删   除</button>
  <script>
   var div_1 = document.getElementById('div-1')
   var div_2 = document.getElementById('div-2')
   var div_3 = document.getElementById('div-3')
   var child_div1 = document.getElementsByClassName('div-1-child')

  document.getElementById('append').onclick = function () {
    append(div_1, 'div')
  }

  document.getElementById('remove').onclick = function () {
    remove(div_1, child_div1[0])
  }
  document.getElementById('insertBefore').onclick = function () {
    var span = setElement('div')
    insertBefore(div_1, span, child_div1[0])
  }
  document.getElementById('creat').onclick = function () {
    setElement('div')
  }
  function append (obj, elementName) {
    var dom = setElement(elementName)
    obj.appendChild(dom) // 将elementName添加在obj的后面
  }
  function remove (obj, removeObj) {
    if (removeObj) {
      obj.removeChild(removeObj) // 移除obj的子元素removeObj
    }
  }
  function insertBefore (parentElement, newElement, oldElement) {
    parentElement.insertBefore(newElement, oldElement) // 插入一个元素
  }
  function setElement (elementName) {
    var dom = document.createElement(elementName) // 创建一个dom元素
    dom.innerHTML = '我是' + elementName
    return dom
  }
  </script>
</body>

</html>