day13：JavaScript DOM编程学习笔记05

十、为元素节点添加子节点

10.1appendChild()：

varreference=element.appendChild(newChild)：

给定子节点newChild将成为给定元素节点element的最后一个子节点。

方法的返回值是一个指向新增子节点的引用指针。

10.2新创建一个元素节点，并把该节点添加为文档中指定节点的子节点

①document.createElement(elementTagName)

新创建一个元素节点，返回值为指向元素节点的引用

结果：

②创建“厦门”的文本节点

document.createTextNode(string)创建一个文本节点

参数为文本值，返回该文本节点的引用

结果：

厦门

③elementNode.appendChild(newChild):为elementNode

新添加newChild子节点，该子节点作为elementNode最后一个子节点

window.οnlοad=function(){
		var liNode=document.createElement("li");
var xmText=document.createTextNode("厦门");
		liNode.appendChild(xmText);
		var cityNode=document.getElementById("city"); 
		cityNode.appendChild(liNode);	
}

※※※例子

例三：

需求1：点击submit按钮时，检查是否选择type，若没有选择给出提示：请选择类型；检查文本框中是否有输入(可以去除前后空格)，若没有输入则给出提示：请输入内容；若检查都通过，则在相应的ul节点中添加对应的li节点

需求2：使包括新增的li都能响应onclick事件：弹出li的文本值。

window.οnlοad=function(){
		//定义函数的基本格式
		function showContent(liNode){
			alert("^_^"+liNode.firstChild.nodeValue);
		}
		
		var liNodes=document.getElementsByTagName("li");
		for(var i=0;i			//响应方法结束：return false
			if(typeVal==null){
				alert("请选择类型");
				return false;
			}

			//5.获取name="name"的文本值：通过value属性：nameval
			var nameEle=document.getElementsByName("name")[0];
			var nameVal=nameEle.value;
			
			//6.去除nameVal前后空格
			var reg=/^s*|s*$/g;
			nameVal=nameVal.replace(reg,"");
			//使name的文本框也去除前后空格。
			nameEle.value=nameVal;
			//7.把nameVal和""进行比较，若是""说明只输入了空格，弹出"请输入内容"。方法结束，return false

			if(nameVal==""){
				alert("请输入内容");
				return false;
			}
			
			//8.创建li节点
			var liNode=document.createElement("li");
			
			//9.利用nameVal创建文本节点
			var content=document.createTextNode(nameVal);
			
			//10.把9加为8的子节点
			liNode.appendChild(content);
			
			//12.为新创建的li添加onclick响应函数
			liNode.οnclick=function(){
				showContent(this);
			}
			
			//11.把8加为选择type对于的ul子节点
			document.getElementById(typeVal).appendChild(liNode);
			
			//3.在onclick响应函数的结尾处添加一个return false，
			//就可以取消提交按钮的默认行为
			return false;
		}
	}		

	
		城市
		游戏
	
		name: