javascript动态添加div

最新推荐文章于 2023-06-10 18:39:47 发布

「已注销」

最新推荐文章于 2023-06-10 18:39:47 发布

阅读量6.9k

点赞数 6

分类专栏： B/S 系统文章标签： js 动态添加div 评教系统

本文链接：https://blog.csdn.net/y_love_f/article/details/22430307

版权

B/S 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

系统

14 篇文章 0 订阅

订阅专栏

网上有很多的实现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 οnclick="getDIV()" ><a href="#">获得question下的所有div</a>v</div>
		<div id="ceshi" οnclick="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++){	
			
		}
	}

结果：