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>
