前端入门学习笔记（三十一）JavaScript入门（十四）DOM（三）节点的创建、删除、替换、插入

最新推荐文章于 2024-04-07 23:46:58 发布

TUTsmile

最新推荐文章于 2024-04-07 23:46:58 发布

阅读量248

点赞数

分类专栏： # DOM JavaScript 文章标签：创建节点删除节点 JavaScript 替换 JavaScript 插入 DON 操作

本文链接：https://blog.csdn.net/tutsmile/article/details/96967612

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM

3 篇文章 0 订阅

订阅专栏

创建节点

关键字	简介
createElement	创建元素节点
createTextNode	创建文本节点
createAttribute	创建属性节点

示例代码如下：

<body>
  <div id="divTest">this is div  </div>

  <script>
    function addHref() {
      let a = document.createElement("a");//创建一个新的元素节点a
      let content = document.createTextNode("www.baidu.com");//创造一个内容节点
      a.appendChild(content);//将内容节点加入

      let href = document.createAttribute("href");//创建属性节点
      href.nodeValue = "https:\\www.baidu.com";//设置href的值
      a.setAttributeNode(href);//将该属性设置到a上

      let divOne = document.getElementById("divTest");
      divOne.appendChild(a);//将a加入到div中
    }
  </script>

  <button onclick="addHref()">添加href</button>

  <hr/>
  <a href="https:\\www.baidu.com">www.baidu.com</a>
</body>

删除节点

关键字	简介
removeChild	删除元素节点
removeAttribute	删除属性节点

代码中会多一个删除内容的方式，因为删除内容有两种方法，一种是removeChild，直接删除元素节点，另一种是innerHtml=""，将内容置为空，示例代码如下所示

<body>
  <script>
    function removeChildDiv() {
      let parent = document.getElementById("parentDiv");
      let child = document.getElementById("childDiv");
      parent.removeChild(child);
    }
    function removeLinkBaiduHref() {
      let link = document.getElementById("linkBaidu");
      link.removeAttribute("href");
    }
    function removeLinkTaobaoText() {
      let link = document.getElementById("linkTaobao");
      link.innerHTML = "";
    }

  </script>
  <div id="parentDiv">
    <div id="childDiv">
      <a id="linkBaidu" href="https://www.baidu.com">www.baidu.com</a>
      <a id="linkTaobao" href="https://www.taobao.com">www.taobao.com</a>
    </div>
  </div>

  <button onclick="removeLinkBaiduHref()">删除www.baidu.com的href属性</button>
  <button onclick="removeLinkTaobaoText()">删除www.taobao.com的内容</button>
  <button onclick="removeChildDiv()">删除子节点</button>
</body>

在这里插入图片描述
此时的DOM结构如下

点了前两个按钮后，DOM变化为如下所示

可以很清楚的看到，linkBaidu的href属性被删除，linkTaobao的内容被删除，此时点击第三个按钮，DOM如下

如果我们不是使用 removeChild 而是使用 innerHtml="" 会怎样呢？
此时将removdChild改为如下所示 ( 注意此处获取的id是parentDiv )

    function removeChildDiv() {
      let parent = document.getElementById("parentDiv");
      parent.innerHTML = "";
    }

执行此代码后，DOM如下所示
在这里插入图片描述
是的，效果与removeChild一致，所以若是要清空所有内容，可以使用innerHtml=“”，若只是要删除单个节点，则需要使用removeChild

替换节点

关键字	简介
replace	替换节点

示例代码如下

<body>
  <div id="parentDiv">
    <div id="d1">第一个div</div>
    <div id="d2">第二个div</div>
    <div id="d3">第三个div</div>
   </div>
     
   <script>
     
   function replaceDiv(){
     let d4=  document.createElement("div");
     let text = document.createTextNode("第四个div");
     
     d4.appendChild(text);
     
     let d3 = document.getElementById("d3");
     
     let parentDiv = document.getElementById("parentDiv");
     
     parentDiv.replaceChild(d4,d3);
   }
    
   </script>
     
   <button onclick="replaceDiv()">替换第3个div</button>
</body>

插入节点

关键字	简介
appendChild	在最后追加节点
insertBefore	在前方插入节点

appendChild 示例

<body>
  <div id="parentDiv">
    <div id="d1">第一个div</div>
    <div id="d2">第二个div</div>
    <div id="d3">第三个div</div>
   </div>
     
   <script>
     function addNode() {
       let p = document.createElement("p");
       let text = document.createTextNode("hello");
       p.appendChild(text);

       let parent = document.getElementById("parentDiv");
       parent.appendChild(p);
     }
   </script>
     
   <button onclick="addNode()">追加节点</button>
</body>

insertBefore 示例

<body>
  <div id="parentDiv">
    <div id="d1">第一个div</div>
    <div id="d2">第二个div</div>
    <div id="d3">第三个div</div>
   </div>
      
   <script>
   let number = 1;
   function insertDiv(){
     let insert=  document.createElement("div");
     let text = document.createTextNode(`第${number}div`);
     number += 1;
     insert.appendChild(text);
      
     let parentDiv = document.getElementById("parentDiv");
     let d3 = document.getElementById("d3");
      
     parentDiv.insertBefore(insert,d3);
   }
     
   </script>
      
   <button onclick="insertDiv()">在三个div前插入</button>
</body>