//给box追加文本内容
var box = document.getElementById(‘box’);
box.innerHTML = ‘新内容
新标签
‘;//点击按钮,在div中创建一个图片
my$(“btn”).onclick=function () {
my$(“dv”).innerHTML=”“;
};
案例:点击按钮创建列表
<button id="btn">按钮</button>
<div id="dv"></div>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
document.getElementById("btn").onclick = function () {
var str = "<ul style='list-style-type: none; cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
document.getElementById("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = document.getElementById("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//鼠标进入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
案例.二级联动
<body>
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option value="hd">海淀</option>
<option value="cy">朝阳</option>
<option value="dc">东城</option>
</select>
</body>
<script type="text/javascript">
var selectCity = document.getElementById("city");
var selectArea = document.getElementById("area");
selectCity.onchange=function(){
var optionVal = selectCity.value;
if(optionVal=="bj"){
selectArea.innerHTML = "<option value='hd'>海淀</option><option value='cy'>朝阳</option><option value='dc'>东城</option>";
}
else if(optionVal=="tj"){
selectArea.innerHTML = "<option value='hk'>南开</option><option value='hx'>河西</option><option value='hd'>河东</option>";
}
else{
selectArea.innerHTML = "<option value='pd'>浦东</option><option value='yp'>杨浦</option><option value='px'>浦西</option>";
}
};
</script>