十、为元素节点添加子节点
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>