createElement 创建一个新的节点 需要和appendChild配和使用
var element= doucument.createElement(‘tr‘);
appendChild 在元素末尾添加一个子节点
element.appenChild(tr)
createTextNode 文本节点
var element = document.createTextNode("你好") tr.appchild(elenemt) //将文本节点添加到tr里面
removeChild 删除元素节点
element.parentNode.removeChild(element) 我删我自己
insertBefore 创建新的列表
elenemt.insertBefore(newnode,newnode) //这两个元素是必须的 newnode要插入的节点 //newnode 要添加新的子节点前的节点
案例
<ul id="city">
<li id="gd">广东</li>
<li>湖南</li>
<li>西藏</li>
<li>广西</li>
</ul>
<input type="button" name="" id="qm" value="前面添加">
<input type="button" name="" id="tj" value="添加">
<input type="button" name="" id="sc" value="删除">
<input type="button" value="更改" id="gg">
<input type="button" value="替换" id="th">
<script>
var ci = document.getElementById("city");
function str(name,lis){
var a=document.getElementById(name)
a.onclick=lis;
}
str("qm",function(){
var b = document.getElementById("gd");
var c = document.createElement("li");
c.innerHTML="广太"
ci.insertBefore(c,b) //将c添加到b的前面
});
str("tj",function(){
var b =document.createElement("li");
b.innerHTML="上海";
ci.appendChild(b) //在ci下面添加一个子节点b
});
str("sc",function(){
var bj=document.getElementsByTagName("li")[3];
bj.parentNode.removeChild(bj); //将本身删除
})
</script>
原文:https://www.cnblogs.com/ckxbk/p/13369925.html