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.onload=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.onload=function(){//定义函数的基本格式function showContent(liNode){alert("^_^"+liNode.firstChild.nodeValue);}var liNodes=document.getElementsByTagName("li");for(var i=0;i<liNodes.length;i++){liNodes[i].onclick=function(){showContent(this);}}//1.获取#submit对应的按钮submitBtnvar submit=document.getElementById("submit");//2.为submitBtn添加onclick响应函数submit.onclick=function(){//4.检查是否选择type，若没有选择给出提示："请选择类型"//4.1选择所有的name="type"的节点typesvar 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 falseif(typeVal==null){alert("请选择类型");return false;}//5.获取name="name"的文本值：通过value属性：namevalvar 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.onclick=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>