js创建添加节点及省市联动案例和验证码例子

   创建节点插入节点，设置节点属性：
   document.createElement("标签名")创建新元素
   elt.seAttribute("属性名","属性值")
   elt.appendChild(e)
   elt.insertBefore(new,old);//添加到child之前,elt必须是old的直接父节点
   elt.removeChild(eChild);//删除指定的子节点

<body onload="ready()">
<input type="button" value="添加" onclick="add()"/>

var num=1;
function add(){
	var inputNode=document.createElement("input");//创建一个指定标签名字的节点
	//设置节点的属性
	inputNode.setAttribute("type","button");
	inputNode.setAttribute("value","按钮"+num);
	num++;
	var bodyNode=document.getElementsByTagName("body")[0];
	bodyNode.appendChild(inputNode);//添加子节点
}

<table>
	<tr>
		<td><input type="file"/><a href="#" onclick="delFile(this)">删除附件</a></td>
	</tr>
	<tr id="lastRow">
		<td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/>
	</tr>
</table>

function addFile(){
	//先要创建一个tr对象
	var trNode=document.createElement("tr");
	//创建td对象
	var tdNode1=document.createElement("td");
	var tdNode2=document.createElement("td");
	tdNode1.innerHTML="<input type='file'/>";
	tdNode2.innerHTML="<a href='#' onclick='delFile(this)'>删除附件</a>";
	//吧td的节点添加到tr节点上
	trNode.appendChild(tdNode1);
	trNode.appendChild(tdNode2);
	var tableNode=document.getElementsByTagName("table")[0];
	var tbodyNode=document.getElementsByTagName("tbody")[0];
	var lastRow=document.getElementById("lastRow");
	tbodyNode.insertBefore(trNode,lastRow);
	tbodyNode.appendChild(trNode);
}
function delFile(aNode){
	var trNode=aNode.parentNode.parentNode;
	var tbodyNode= document.getElementsByTagName("tbody")[0];
	tbodyNode.removeChild(trNode);
	
}

省市联动思路：维护一个二维数组存储省份对应的城市，然后根据索引获取对应的城市，创建option下拉选项添加到城市上，添加之前先清空city框所有的值。

省份<select  id="province" onchange="showCity()">
		<option>省份</option>
		<option>广东</option>
		<option>广西</option>
		<option>湖南</option>
	</select>
城市<select id="city">
		<option>城市</option>
	</select>

function showCity(){
//维护一个二维数组存储省份对应的城市
	var citys=[[],["广州","佛山","镇江","中山"],["长沙","衡阳","岳阳","滨州"],["南宁","贵州","柳州"]];
	var provinceNode=document.getElementById("province");
	var selectIndex=provinceNode.selectedIndex;
	//alert(provinceNode.selectedIndex);
	//获取对应的城市
	var cityDatas=citys[selectIndex];
	
	//alert(cityDatas);
	//找到city节点
	var cityNode=document.getElementById("city");//先清空city框所有option
	/*var children=cityNode.childNodes;
	for(var i=0;i<children.length;){
		cityNode.removeChild(children[i]);
	}*/
	cityNode.options.length=1;//设置option的个数
	//遍历对应的所有城市创建对应的option添加到city上
	for(var index=0;index<cityDatas.length;index++){
		var option=document.createElement("option");
		option.innerHTML=cityDatas[index];
		cityNode.appendChild(option);
	}
}

<span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>

function createCode(){
	var datas=['A','2','3','4','B','C','D','和'];
	var code="";
	for(var i=0;i<4;i++){
		//随机产生四个索引值
		var index=Math.floor(Math.random()*datas.length);//0-1不包括1.0
		code+=datas[index];
	}
	var spanNode=document.getElementById("code");
	spanNode.innerHTML=code;
	spanNode.style.fontSize="24px";
	spanNode.style.color="blue";
	spanNode.style.backgroundColor="gray";
	spanNode.style.textDecoration="line-through";
}
function ready(){
	createCode();
}

js创建添加节点及省市联动案例和验证码例子

猜你喜欢