40、Dom的增删改

最新推荐文章于 2024-08-25 15:00:00 发布

五仁卤鸡翅

最新推荐文章于 2024-08-25 15:00:00 发布

阅读量190

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/MoonNight608/article/details/106857838

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

介绍
dom增、删、改

介绍

本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记

dom增、删、改

1、document.createElement()

  可以创建一个元素节点对象
  他需要一个标签名作为参数，将会根据该标签名创建元素节点对象
  并将创建好的对象作为返回对象

2、document.createTextNode

 可以用来创建一个文本节点对象
 需要一个内容作为参数，将会根据该内容创建文本节点，并将
 新的节点返回

3、appendChild()

向一个父节点中添加一个新的子节点
用法，父节点.appendChild(子节点)

4、insertBefore()

可以在指定的子节点前插入新的节点

5、repalceChild()

可以在使用新节点替换旧节点

6、removeChild()

可以在删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script>
   window.onload=function(){
     
        function myclick(idstr,fun){
             var btn=document.getElementById(idstr);
             btn.onclick=fun
           }
       
       // 创建一个"广州"节点，添加到#city
       myClick("btn1",function(){
           // 创建广州节点<li>广州</li>
          
        1、document.createElement()
            可以创建一个元素节点对象
            他需要一个标签名作为参数，将会根据该标签名创建元素节点对象
            并将创建好的对象作为返回对象
           
           var li=document.createElement("li");
           
        
        2、document.createTextNode
            可以用来创建一个文本节点对象
            需要一个内容作为参数，将会根据该内容创建文本节点，并将
            新的节点返回
       
           var text=document.createTextNode("广州")
        
       3、appendChild()
               -向一个父节点中添加一个新的子节点
               -用法，父节点.appendChild(子节点)
           
               li.appendChild(text);
           
              var city=document.getElementById("city");
             city.appendChild(li);
       });
       myClick("btn2",function(){
            var li=document.createElement("li");
            var text=document.createTextNode("广州");
             li.appendChild(text);
             var bj=document.getElementById("bj");
           
          4、insertBefore()
               - 可以在指定的子节点前插入新的节点
           
             var city=document.getElementById("city");
             city.insertBefore(li,bj)
             
             
       })
       
        myClick("btn3",function(){
            var li=document.createElement("li");
            var text=document.createTextNode("广州");
             li.appendChild(text);
             var bj=document.getElementById("bj");
             
          5、repalceChild()
               - 可以在使用新节点替换旧节点
             */
             var city=document.getElementById("city");
             city.replaceChild(li,bj)
             
             
       })
        myClick("btn4",function(){
            var li=document.createElement("li");
            var text=document.createTextNode("广州");
             li.appendChild(text);
             var bj=document.getElementById("bj");
           
          6、removeChild()
               - 可以在删除子节点
          
             var city=document.getElementById("city");
             bj.parentNode.removeChild(bj)
             city.removeChild(bj)
             
             
       })
       
        myClick("btn7",function(){
         
         7、向city添加广州
              - innerHTML也可以实现增删改的操作
              - 一般我们会两种方式结合使用
          
             var city=document.getElementById("city");
             city.innerHTML+="<li>广州</li>"
            
             var li=document.createElement("li");
             /*
               向li中设置文本
              
             */
             li.innerHTML="广州"；
             city.appendChile(li)
       })
   }

   
   </script>
   
   <div></div>
</body>
</html>