动态创建一个列表
方法一：对象.innerHTML = "标签及代码";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
var fruits = ["apple","banana","grape","orange","watermelon","peach"];
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
var str = "<ul style='list-style:none; cursor:pointer'>";
//循环创建对应的li
for(var i=0; i<fruits.length; i++){
str += "<li>"+fruits[i]+"</li>";
}
str += "</ul>";
box.innerHTML = str;
//获取所有的li标签，添加鼠标进入和鼠标离开事件
var list = box.getElementsByTagName("li");
for(var j=0; j<list.length; j++){
list[j].onmouseover = function(){
this.style.backgroundColor = "yellow";
this.style.fontSize = "40px";
};
list[j].onmouseout = function(){
this.style.backgroundColor = "";
this.style.fontSize = "";
};
}
};
</script>
</body>
</html>点击按钮前：
点击按钮后：
banana是鼠标放上产生的效果。
方法二：document.createElement("标签的名字");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
var fruits = ["apple","banana","grape","orange","watermelon","peach"];
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
//创建一个ul，追加到div中
var ulObj = document.createElement("ul");
ulObj.style.listStyle = "none";
ulObj.style.cursor = "pointer";
box.appendChild(ulObj);
for(var i=0; i<fruits.length; i++){
//循环创建对应的li，追加到ul中
var liObj = document.createElement("li");
liObj.innerHTML = fruits[i];
ulObj.appendChild(liObj);
//为li标签添加鼠标进入事件
liObj.onmouseover = function(){
this.style.backgroundColor = "yellow";
this.style.fontSize = "40px";
};
//为li标签添加鼠标离开事件
liObj.onmouseout = function(){
this.style.backgroundColor = "";
this.style.fontSize = "";
};
}
};
</script>
</body>
</html>点击按钮前：
点击按钮后：
apple是鼠标进入后的效果
注意：如果是循环的方式添加事件，推荐使用命名函数，如果不是循环的方式添加事件，推荐使用匿名函数。