1 动态创建节点
详细说明请查看点击此处查看
<!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>
时间： 2024-10-11 08:58:20