dom增删改查之自学js系列

window.οnlοad=function(){

       function myclick(idstr,fun){
           var idstr=document.getElementsByName("idstr");
           idstr.onclick=fun;
       }            

       
        /* 创建一个广州节点，添加到#city下 */
        /*要想创建一个新节点到city下，首先要创建一个内容，创建li，将广州内容放到li里，然后将广州内容放入li里，然后将大li放到创建的city里。*/
                
        /* 创建一个广州节点，添加到#city下 */
        /*要想创建一个新节点到city下，首先要创建一个内容，创建li，将广州内容放到li里，然后将广州内容放入li里，然后将大li放到创建的city里。*/
          var  btn1=document.getElementById("an1");
          /*设置查找的时候通过input设置的btn，最好通过id，不要通过name获取绑定。*/
          btn1.onclick=function(){
          var  gztext=document.createTextNode("广州");
          var  li=document.createElement("li");
          li.appendChild(gztext);
          var  city=document.getElementById("city");
          city.appendChild(li);
          
          }
          var an2=document.getElementById("an2");
          an2.onclick=function(){
              /*插入仍需新建，只是li不需要放到大city里*/
              /*将广州节点插入到#bj前面*/
              var  gztext=document.createTextNode("广州");
              var  li=document.createElement("li");
              /*这一套均为新建后的li，把text加入到li中。*/
              li.appendChild(gztext);
              var city=document.getElementById("city");
              var bj=document.getElementById("bj");
             /* city.appendChild(li); 此处不需要把li添加到li里，这里的找bj只需找到id位置。*/
              city.insertBefore(li,bj);
              /*insertbefore（新，旧），将新的插入到旧的前面。
                    即为将li（广州）插入到bj节点前，*/
          }
          /* 使用广州节点替换#bj节点 */
          var an3=document.getElementById("an3");
          an3.onclick=function(){             
          /* var gztext=createElement("gz");
            光写这一句话里面没有内容，仅仅有一个空元素。*/
            var gztext=document.createTextNode("广州");
            var li=document.createElement("li");
            li.appendChild(gztext);
                /*直接新建一份新的li中有新的text------------------新的广州节点已经完成*/
          var bj=document.getElementById("bj");
          /*------------------------------------------------------bj节点已就绪*/
          /*为了能够获取父元素将子元素代替，获取city*/
          var city=document.getElementById("city");
          city.replaceChild(li , bj);
           }
          
          var an4=document.getElementById("an4");
          an4.onclick=function(){
              /*"删除#bj节点"*/
             var bj= document.getElementById("bj");
             /*获取id名为bj，city的节点，并将此节点等同于前面的bj、city*/
            /*  var city=document.getElementById("city"); 
                    city.removeChild(bj);  ----------------两种均可，第二种无需绑定其父节点*/
            bj.parentElement.removeChild(bj);/*即removechild里面的元素，可以填绑定完标签给的节点*/
           

          }

          var an5=document.getElementById("an5");
          an5.onclick=function(){
            /*读取#city内的html代码*/
            var city=document.getElementById("city");
            alert(city.innerHTML);/*此处调的属性，不能加引号*/
          }
          var an6=document.getElementById("an6");
          an6.onclick=function(){
            /* "设置#bj内的html代码" */
            var bj=document.getElementById("bj");
            bj.innerHTML="<h1>泰罗</h1>";/*此刻html与text效果一样*/
            
          }
          var an7=document.getElementById("an7");
          an7.onclick=function(){
           /*  创建广州节点,添加到#city下 */
            var city =document.getElementById("city");
            city.innerHTML+="<li>广州</li>";
                /*+= 即在原有city的基础上添加代码.简单,但是工作量太大了.全动了。*/
          }
          var an8=document.getElementById("an8");
          an8.onclick=function(){
           /*  创建广州节点,添加到#city下 */
            var city =document.getElementById("city");
            var li=document.createElement("li");
            li.innerHTML="广州";
            city.appendChild(li);
                /*折中，获取city，创建li，在li内用inner设置，然后再用appendchild把li加到city中*/
          }


    } 

    <div class="boxall">
<div class="box">
    <p>你最喜欢哪个城市</p>
    <ul class="cs" id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>
    
</div>
<div class="box2">
<input type="button"     class="btn" id="an1" value="创建一个广州节点，添加到#city下">
    <input type="button" class="btn" id="an2" value="将广州节点插入到#bj前面">
    <input type="button" class="btn" id="an3" value="使用广州节点替换#bj节点">
    <input type="button" class="btn" id="an4" value="删除#bj节点">
    <input type="button" class="btn" id="an5" value="读取#city内的html代码">
    <input type="button" class="btn" id="an6" value="设置#bj内的html代码">
    <input type="button" class="btn" id="an7" value="创建广州节点,添加到#city下全动版">
    <input type="button" class="btn" id="an8" value="创建广州节点,添加到#city下结合版">
    </div>
</div>

 .boxall{width: 900px;   
                        margin:20px auto;}
        .box{border: 1px solid black;
        width: 300px;
                margin: 20px ;
                    padding-left: 5px;
                        float: left;
                            }
        li{list-style: none;
                float: left;
                    margin-right: 25px;
                    margin-top: 20px;
                    margin-bottom: 10px;
                    /*设置每个li与底部的距离*/
                        width: 40px;
                            height: 30px;
                                margin-left:-18px ;
                                    background-color: greenyellow;   
                                        border: 1px solid black ; 
                                            text-align: center;
                                                line-height: 30px; 

                                }
       
        p{padding-top:10px;
            padding-left: 15px;}
        
       
        .box2{width: 300px;     /*使得垂直排列关键一步，放到右边浮动。*/
                   /*给出足够的宽高才能平均每行一个，*/
                        float: left;}
        .btn{width: 300px;
                 height: 30px;
                     margin-top: 20px;}