JavaScript之DOM增删改

插入节点:主要包括两种方法
1.appendChild(newChild):
向当前节点的子节点列表的末尾添加新的子节点
2.insertBefore(newChild,refChild):
在已有的子节点前插入一个新节点

替换节点:replaceChild()方法:可以将某个子节点替换为另一个
nodeObject.replaceChild(new_node,old_node)
如果替换成功,则返回被替换掉的节点,否则返回null

删除节点:
removeChild(node)方法:可以从子节点列表中删除某个节点
node:要删除的节点

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS中节点元素的增删改</title>
    <link rel="stylesheet" href="../css/css2.css">
    <script>
        window.onload = function () {          
            var cityNode=document.getElementById('city');

            // 创建一个"广州"节点
            //1.创建li元素
            var gzLi= document.createElement('li');
            gzLi.setAttribute('class','gz');
            //2.设置元素的innerHtml
            gzLi.innerHTML="广州";




            //创建一个"广州"节点,添加到#city下
            var btn01 = document.getElementById('btn01');
            btn01.onclick = function () {
            // 3.将此li添加到city列的末尾
            cityNode.appendChild(gzLi);
            
            }

             //把广州节点添加到北京之前
             var btn02=document.getElementById('btn02');
             btn02.onclick=function(){
                 //2.获取北京节点
                 var bjNode=document.getElementById('bj');
                cityNode.insertBefore(gzLi,bjNode);
             }


             /*
             替换节点:replaceChild()方法:可以将某个子节点替换为另一个
             nodeObject.replaceChild(new_node,old_node)
             如果替换成功,则返回被替换掉的节点,否则返回null

             */
             //使用"广州"节点替换#bj节点
             var btn03=document.getElementById('btn03');
             btn03.onclick=function(){
                 //获取北京节点
                 var bjNode=document.getElementById('bj');
                 var replacedNode=cityNode.replaceChild(gzLi,bjNode);
                //  if(replacedNode!=null){
                //     alert('it had deleted!');
                //  }

             }
             
             /*
             删除节点:
             removeChild(node)方法:可以从子节点列表中删除某个节点
             node:要删除的节点
             */
             //删除#bj节点
             var btn04=document.getElementById('btn04');
             btn04.onclick=function(){
                //获取北京节点
                var bjNode=document.getElementById('bj');
                cityNode.removeChild(bjNode);
             }

             //读取#city内的HTML代码
             var  btn05=document.getElementById('btn05');
             btn05.onclick=function(){
                var htmls=cityNode.innerHTML;
                console.log("htmls:"+htmls);
             }

             //设置#bj内的HTML代码
             var btn06=document.getElementById('btn06');
             btn06.onclick=function(){
                //获取北京节点
                var bjNode=document.getElementById('bj');
                
                //设置节点内部的html代码
                bjNode.innerHTML="北京(BJ)";
             }


             //创建一个"广州"节点,添加到#city下
             var btn07=document.getElementById('btn07');
             btn07.onclick=function(){
                //使用innerHTML属性的方式,添加新节点
                cityNode.innerHTML+="
  • 广州
  • "
    ; } } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> <div><button id="btn02">"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> </div> </body> </html>

    你可能感兴趣的:(JavaScript,javascript,js)