javascript动态添加div

网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。

前台代码

	

		
获得question下的所有divv
		
动态添加div
		

			

				

					

				
			
		
	



              

js代码

	function createQuestion(tixing){	
		//1.先判断在需要插入的位置是否存在子节点div
		var oTest = document.getElementById("question");//获得所有子节点的父节点	
		var flag = oTest.hasChildNodes();//判断当前节点是否拥有子节点
		if(flag == false){//不存在其他节点
		//2.当不存在---插入第一个节点
			var obj1 = document.createElement("DIV"); //创建DIV
			//将obj1插入到对应的位置
			//1.取得需要插入的位置的上一个节点
			var obj1Parent = document.getElementById("question");
			//2.将obj1插入到这个节点下面
			//obj1Parent.innerHTML="
插入的第一个div
"; //插入第一个div
			obj1Parent.innerHTML="
插入的第一个div
"; //插入第一个div
		}else{//存在其他的节点
		//3.当已经存在---插入其他节点
			//3.1.创建需要插入的新节点
			var newNode = document.createElement("div");
			var objDivs = oTest.getElementsByTagName("DIV");
			var sum = objDivs.length + 1;
			var reforeNode = objDivs[objDivs.length-1]
			newNode.innerHTML = "添加的div" + sum;
			//3.2.取得插入位置后面的节点---存在节点最后一个节点
			//var reforeNode = document.getElementById("question_danxuan");
			//3.3.实现插入函数
			oTest.insertBefore(newNode,reforeNode.nextSibling);
		}
	}
	function getDIV(){
		var obj = document.getElementById("question");
		var objDivs = obj.getElementsByTagName("DIV");
		alert(objDivs.length);
		for(i=0;i

结果：