JS-DOM的增删改

一、方法

方法	作用	参数
createElement（）	创建一个元素	创建的元素
createTextNode（）	创建一个文本节点	输入的文本
appendChild（）	把元素追加到一个容器的末尾	元素
父节点.insertBefore(newNode, referenceNode)	把一个元素插入到另一个元素的前面	newNode：将要插入的节点 referenceNode：被参照的节点（即要插在该节点之前） insertedNode：插入后的节点 parentNode：父节点
【ele].cloneNode(）	把某一个节点进行克隆	(无/true) ● ();浅克隆： 只是克隆了一个节点，里面的内容还有样式都没克隆 ● (true);深克隆：把节点包含的所有内容进行克隆
【context】.removeChild（ele）	移除某个节点	元素
setAttribute	设置当前元素的某一个自定义属性	属性名
getAttribute	获取当前元素的某一个自定义属性	属性名
removeAttribute	删除当前元素的某一个自定义属性	属性名

 二、代码示例及结果展示

2.1 初始页面代码及效果图

 <ul>
      <li id="one" style="color: red">111</li>
      <li id="two" class="2style">222</li>
 </ul>

2.2 方法代码及结果展示

2.2.1 createElement

        //方法一：
        //1.创建标签
        let div = document.createElement("div");
        //2. 添加内容
        div.innerHTML = "hello";
        //3.写入页面  父元素.appendChild(子元素)
        // 添加到父元素的最后，是最后一个子元素
        document.body.appendChild(div); 

 

2.2.2 createTextNode

         //不建议
        //1.创建标签
        let div = document.createElement("div");
        //2. 添加内容
        let mytext = document.createTextNode("哈哈");
        div.appendChild(mytext);
        //3.写入页面
        document.body.appendChild(div);

 

2.2.3 appendChild

 该方法一般与上两个方法合并使用，用于将添加的元素追加至容器末尾

2.2.4 insertBefore

 该方法有两个作用：

        1.实现元素的插入

 //1.实现元素的插入       
        var lia = document.createElement("li");
        lia.innerHTML = "aaa";
        var ul = document.querySelector("ul");
        // 父级元素.insertBefore(新的子元素,旧的子元素)
        // 将新的子元素插入到旧的子元素的前面
        ul.insertBefore(lia, two);

 

        2.实现元素位置的交换

//2.实现元素的交换位置
        var ul = document.querySelector("ul");
        //交换位置
        ul.insertBefore(two, one);  

 

2.2.5 cloneNode

         //克隆  克隆元素.cloneNode(无/true)
          var ul = document.querySelector("ul");
          console.log(ul.cloneNode()); //只是克隆了一个节点，里面的内容还有样式都没克隆
          console.log(ul.cloneNode(true)); //有样式，有内容
样式图如下：

 

控制台输出：

           var ul = document.querySelector("ul");
          var con = ul.cloneNode(true);
          document.body.appendChild(con);    

 

2.2.6 removeChild

//删除某个节点  父元素.removeChild(子元素)
          var ul = document.querySelector("ul");
          ul.removeChild(one);

 

2.2.7 setAttribute

//设置属性
           two.setAttribute("name", "222");
           console.dir(two);

 

2.2.8 getAttribute

//获取属性
           console.log(two.getAttribute("id"));
           console.log(two.getAttribute("age")); //null

 

2.2.9 removeAttribute

//删除属性
           two.removeAttribute("class");