1.案例一 :在末尾添加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在末尾添加节点</title>
</head>
<body>
<ul id="ulid">
<li>关关雎鸠</li>
<li>在河之洲</li>
<li>窈窕淑女</li>
<li>君子好逑</li>
</ul>
<br/>
<input type="button" value="add" onclick="add1();" />
<script type="text/javascript">
function add1(){
//获取到ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(text1);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</body>
</html>
点击前:
点击后:
2.案例二:动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例二动态显示时间</title>
<style type="text/css">
#times{
width: 190px;
height: 120px;
border: 1px solid rgba(91,92,93);
padding-top: 80px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="times"></div>
<script type="text/javascript">
function getDate(){
//获取当前时间
var date = new Date();
//转换成字符串形式
var d1 = date.toLocaleString();
//获取div
var div = document.getElementById("times");
div.innerHTML=d1;
}
//使用定时器实现每一秒写一次时间
setInterval("getDate();",1000)
</script>
</body>
</html>
3.案例三 下拉列表左右选择分析
待续.....