JS学习笔记：DOM节点的删除、替换与修改
今天在学做网站论坛分享一下JS学习过程中DOM节点的删除、替换与修改的方法。
节点的删除：
removeChild [父节. removeChild(待删除的子节点)]
要站在父元素角度，先找到父元素，-----再找到子节点--------再使用removeChild()删除子元素
<script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //先找到要删除的父节点
var b=a.children[1];//再找到要删除的节点
a.removeChild(b)//删除操作
}
</script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //先找到要删除的父节点
var b=a.children[1];//再找到要删除的节点
a.removeChild(b)//删除操作
}
</script>
节点的替换：
replaceChild() [父节.replaceChild(新节点，旧节点)]
先找到父元素---------再找到要替换的子节点---------再创建一个新的子节点------------再使用replaceChild()取旧替新
<script>
function t(){
var all=document.getElementsByTagName('ul')[0];//找到父元素
var old=all.children[1];//找到要替换的子元素
var xin=document.createElement('li');//创建一个li元素
var wen=document.createTextNode('中');//创建一个文本节点
xin.appendChild(wen);//将文本节点插入到li里面
all.replaceChild(xin,old); //执行替换操作
}
</script>
function t(){
var all=document.getElementsByTagName('ul')[0];//找到父元素
var old=all.children[1];//找到要替换的子元素
var xin=document.createElement('li');//创建一个li元素
var wen=document.createTextNode('中');//创建一个文本节点
xin.appendChild(wen);//将文本节点插入到li里面
all.replaceChild(xin,old); //执行替换操作
}
</script>
直接插入HTML内容：
innerHTML （它是一种属性）【它不是W3C的标准，但各大浏览器都支持,效率很高】 [插入的位置.innerHTML=插入的内容]
执行innerHTML操作时，原有节点下面的子节点会被删除。
<script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //找到插入的位置
var b="<li>中</li><li>化</li><li>人</li><li>民</li>"; //将插入的内容写成一行，并赋给一个变量
a.innerHTML=b; //innerHTML是一个属性，它用=,
}
</script>
function t(){
var a=document.getElementsByTagName('ul')[0]; //找到插入的位置
var b="<li>中</li><li>化</li><li>人</li><li>民</li>"; //将插入的内容写成一行，并赋给一个变量
a.innerHTML=b; //innerHTML是一个属性，它用=,
}
</script>