js操作dom元素增删改查

HTML代码如下：

在这里插入代码片` 
<div id="total">
		           <div class="inner">
		               <p>你喜欢哪个城市？</p>
		               <ul id="city">
		                   <li id="bj">北京</li>
		                   <li id="sh">上海</li>
		                   <li id="dj">东京</li>
		                   <li id="se">首尔</li>
		
		               </ul>
		           </div>
		       </div>
		       <div id="btnList">
		           <div><button id="btn01">创建一个广州节点，添加到#cit下</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>
		      

在这里插入代码片

		window.onload=function(){
		
		       //创建一个广州节点，添加到#cit下
		
		       myClick("btn01",function(){
		        //创建广州节点
		        var li=document.createElement("li");
		        //创建广州文本节点
		      var gzText=  document.createTextNode("广州")
		      //gzText设置为li子节点
		        li.appendChild(gzText)
		        //获取id为city的节点
		        var city=document.getElementById("city")
		        //将广州节点添加到city下
		        city.appendChild(li);
		       });
		
		           //将广州节点插入到#bj下
		           myClick("btn02",function(){
		               var li=document.createElement("li")
		               var gzText=  document.createTextNode("广州")
		               li.appendChild(gzText)
		               var bj=document.getElementById("bj")
		               var city=document.getElementById("city")
		               city.insertBefore(li,bj)
		           });
		
		           //使用广州节点替换#bj前面
		           myClick("btn03",function(){
		               var li=document.createElement("li")
		               var gzText=  document.createTextNode("广州")
		               li.appendChild(gzText)
		               var bj=document.getElementById("bj");
		               var city=document.getElementById("city");
		               city.replaceChild(li,bj)
		
		
		              
		           });
		           //删除#bj节点
		           myClick("btn04",function(){             
		               var bj=document.getElementById("bj");
		               var city=document.getElementById("city");
		               city.removeChild(bj)
		
		
		              
		           });
		           //读取#city内的html代码
		           myClick("btn05",function(){             
		               var city=document.getElementById("city");             
		               alert(city.innerHTML)              
		           });
		
		
		           //设置#bj内的HTML代码
		           myClick("btn06",function(){ 
		            var bj=document.getElementById("bj");                                         
		            bj.innerHTML="昌平"             
		           });
		
		        //向city中添加广州
		        myClick("btn07",function(){ 
		            var city=document.getElementById("city");                                        
		            //city.innerHTML+="<li>广州</li>"     
		            var li=document.createElement("li");         
		           });
		
		       };
		       function myClick(idStr,fun){
		           var btn=document.getElementById(idStr);
		           btn.onclick=fun;
		       }

css样式自己写吧~