js 创建、添加、删除元素节点 添加文本节点

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>