day13：JavaScript DOM编程学习笔记05

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

10.1appendChild()：

varreference=element.appendChild(newChild)：

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

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

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

①document.createElement(elementTagName)

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

结果：<li></li>

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

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

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

结果：<li>厦门</li>

③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<liNodes.length;i++){
			liNodes[i].οnclick=function(){
				showContent(this);
			}
		}
		
		//1.获取#submit对应的按钮submitBtn
		var submit=document.getElementById("submit");
		
		//2.为submitBtn添加onclick响应函数
		submit.οnclick=function(){
			
			//4.检查是否选择type，若没有选择给出提示："请选择类型"
			//4.1选择所有的name="type"的节点types
			var types=document.getElementsByName("type");
			
			//4.2遍历types，检查其是否有一个type的checked属性为true,就可以说明有一个type被选中了:通过 if(元素节点.属性名)
			//来判断某一个元素节点是否有该属性
			var typeVal=null;
			for(var i=0;i<types.length;i++){
				if(types[i].checked){
					typeVal=types[i].value;
					break;
				}
			}
			
			//4.3若没有任何一个type被选中，则弹出：“请选择类型”。
			//响应方法结束：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;
		}
	}		

<form action="dom-7.html" name="myform">
	
		<input type="radio" name="type" value="city">城市
		<input type="radio" name="type" value="game">游戏
	
		name:<input type="text" name="name"/>
		<input type="submit" value="Submit" id="submit"/>
	
</form>