1 动态创建节点


1-1 通过jsp最原生的方法来创建节点

详细说明请查看点击此处查看


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title> 这是使用 jquery的第一个案例 </title>
	<style>
		.hh{
			width: 200px;
			height:1 00px;
			padding: 10px;
			margin: 5px;
			float: left;
			border: 2px solid #ccc;
			background: #bbffaa;
		}
	</style>

</head>
<body>
	<h1>动态创建div节点</h1>
<!-- 	创建div标签 并引用 我们定义的样式 -->
	<div class="hh">
		<div class="addDiv">点击页面会动态创建元素节点
		</div>
	</div>
	<script type="text/javascript">
		//从DOM选取元素
		  var body = document.querySelector('body');
		  //为document添加点击事件
		document.addEventListener('click',function(){
			
			//创建两个div
			var div1 = document.createElement('div')
			var div2 = document.createElement("div");
			//设置属性
			div1.setAttribute('class','hh')
			div2.className='addDiv' 
			//向div中添加文本
			div2.innerHTML="动态创建div";
			//设置加入文档，也就是包含关系
			div1.appendChild(div2)
			body.appendChild(div1)
		},false)
	</script>
</body>
</html>


效果图： 1-1