javascript(19)dom中的增删改

网页内内容

			window.onload=function(){
				var add=document.getElementById("add");
				
				var city=document.getElementById("city");
				//增加南充节点
				add.onclick=function(){
					//创建文本节点
					var nanchongText=document.createTextNode("南充");
					//创建li元素节点
					var li=document.createElement("li");
					//将文本节点添加到li元素节点中
					li.appendChild(nanchongText);
					//将li元素节点添加到父节点ul中
					city.appendChild(li);
					
				};

点击add：

				var del=document.getElementById("del");			
				//删除子节点
				//removeChilde()参数是id名
				del.onclick=function(){
					city.removeChild(gh);
				};

点击del：

				var nanchongText=document.createTextNode("攀枝花");
				var li=document.createElement("li");
				li.appendChild(nanchongText);
				var replace=document.getElementById("replace");
				//replaceChild() 替换掉子节点
				//参数:新节点对象和旧节点（这里是通过id）
				replace.onclick=function(){
					city.replaceChild(li,gy);
				};

点击replace：

				var insert=document.getElementById("insert");				
				//insertBefore() 在什么之前插入
				//参数：新节点对象和要 旧节点（这里是通过id）
				insert.onclick=function(){
					city.insertBefore(li,gh);
					
				};

这里要刷新一下页面，因为广汉节点直接被删除了
点击insert：

				//通过innerHTML与createElement()共同完成
				//不要直接city.innerHTML，因为这会重新加载所有的子节点
				var add2=document.getElementById("add2");
				add2.onclick=function(){
					var li=document.createElement("li");
					li.innerHTML="自贡"
					city.appendChild(li);
					
				};
				
				
			};

全部代码块为一个script标签里的内容

body部分代码

		<ul id="city">
			<li>成都</li>
			<li>遂宁</li>
			<li id='gh'>广汉</li>
			<li id='gy'>广元</li>
		</ul>
		<button id="add">add</button>
		<button id="add2">add2</button>
		<button id="del">del</button>
		<button id="replace">replace</button>
		<button id="insert">insert</button>

方法:
增加元素节点:document.createElement()
增加文本节点:document.createTextNode()
向父节点中添加子节点:父节点.appendChild()
替换节点:父节点.replaceChild()
删除节点:父节点.removeChild()