1:DOM节点的增加

createElement创建节点
cloneNode克隆节点
appendChild追加节点到某个元素后
insertBefore在元素前面添加节点

<script>
    //创建一个li节点
        var li=document.createElement("li");
        li.innerText="你是谁"
        console.log( li);
        //将创建的元素添加到最后面
        var ul=document.querySelector("ul")
        //将创建出来的li标签追加到ul中
        ul.appendChild(li);
    </script>

2:删除节点

1.m.removeChild(n)删除元素中的n节点
2.m.remove();删除自己
3.removeAttribute
4.removeCdild

删除元素节点

<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
 
</script>
 
<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>

删除属性节点

<script>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
 
</script>
 
<a id="link" href="http://12306.com">http://12306.com</a>

删除文本节点
1:通过childNodes[0]获取第一个子元素节点
2:通过removeChild删除该文本节点
但是这种方式比较麻烦,一般都是直接通过innerHTML设置为空
注:通过innerHTML=""的方式,同样会导致文本节点子节点呗删除

<script>
 
function removeDiv1(){
  var parentDiv = document.getElementById("parentDiv");
  var textNode = parentDiv.childNodes[0];
  parentDiv.removeChild(textNode);
}
function removeDiv2(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="";
}
function recover(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="这里是文本 ";
}
 
</script>
 
<style>
button{
display:block;
}
</style>
<div id="parentDiv">
   这里是文本
 
</div>
 
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>

3:修改节点

1:获取父节点
2:创建子节点
3:获取被修改节点
4:通过replaceChild进行替换(参数,第一个是保留的节点,第二个就是被替换的节点)

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