JS——DOM增删改

document.createElement（）创建一个元素节点对象，需要一个标签名作为参数，创建好节点。

document.createTextNode("")  创建一个文本节点，需要一个文本内容作为参数，

父节点.appendChild();   像一个父节点中添加一个新的子节点

父节点.insertBefore（）在指定的子节点前插入节点---父节点调用

父节点.replaceChild       替换指定的子节点。

父节点.removeChild      删除子节点-----------------》直接使用子节点.parentNode.removeChild（常用）

使用innerHTML也可以完成DOM的增删改的相关操作，一般会结合使用。

<script type="text/javascript">
			//
			window.onload = function(){
				//添加一个子节点
				myClick("btn01",function(){
					//创建一个新的节点
				
					var  li = document.createElement("li");
					var gztext = document.createTextNode("关谷广州")
					//add
					//设置子节点
					li.appendChild(gztext);
					//获取city'节点'
					var city = document.getElementById("city");
					city.appendChild(li);
					
				});
				
				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);
				});
				
				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);
					
				});
				myClick("btn04",function(){
					/*var bj = document.getElementById("bj");
					var city = document.getElementById("city");*/
					
					bj.parentNode.removeChild(bj);//常用
				});
				myClick("btn05",function(){
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				myClick("btn06",function(){
					var bj = document.getElementById("bj");
					bj.innerHTML = "changpin";
					
				});
				myClick("btn07",function(){
					var city = document.getElementById("city");
					/*city.innerHTML += "<li>广州</li>";*/
					var li = document.createLinearGradient("li");
					li.innerHTML = "广州";
					city.appendChild(li);
				});
				
			};
			function myClick(idStr, fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}