网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。
前台代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js动态添加div</title>
</head>
<script type="text/javascript" src="js动态添加div.js"></script>
<body>
<form>
<div onclick="getDIV()" ><a href="#">获得question下的所有div</a>v</div>
<div id="ceshi" onclick="createQuestion(‘question_danxuan‘)" ><a href="#">动态添加div</a></div>
<div>
<div id="sur" class="survey">
<div>
<div id="question" class="surveycontent"></div>
</div>
</div>
</div>
</form>
</body>
</html>
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 class=\"ceshi ceshi2 \" style=\"color:red\">插入的第一个div</div>"; //插入第一个div
obj1Parent.innerHTML="<div id=" + tixing + ">插入的第一个div</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<objDivs.length;i++){
}
}
结果：