首页 > Web开发 > 详细

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

时间:2020-07-24 10:37:03      阅读:90      评论:0      收藏:0      [点我收藏+]

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>

 

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

原文:https://www.cnblogs.com/ckxbk/p/13369925.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!