版权声明：本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。 https://blog.csdn.net/qq_30225725/article/details/89309787
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//在一个函数内部又定义一个函数
/*function f1(){
var n=99;
function f2(){//只是定义函数，必须调用才会执行
console.log(n); //在内部函数f2中可以访问到函数f1中的局部变量n
}
//f2();
return f2; //返回函数f2
}
var fn=f1();
fn();*/
function doAdd(){
for(var i=1;i<=5;i++){
//方式一：会产生闭包问题
/*var btn=document.createElement("input");
btn.type="button";
btn.value="按钮"+i;
btn.function(){
console.log("点击了按钮"+i);
};
$("mydiv").appendChild(btn);*/
//方式二：不在函数内部定义函数
//$("mydiv").appendChild(createButton(i));
//方式三：为元素附加属性
var btn=document.createElement("input");
btn.type="button";
btn.value="按钮"+i;
btn.num=i; //存储数据
btn.onclick=function(){
console.log("点击了按钮"+this.num);
};
$("mydiv").appendChild(btn);
}
}
function createButton(num){
var btn=document.createElement("input");
btn.type="button";
btn.value="按钮"+num;
btn.onclick=function(){
console.log("点击了按钮"+num);
};
return btn;
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<input type="button" value="向div中添加多个按钮" onclick="doAdd()" >
<div id="mydiv"></div>
</body>
</html>
难点：通过为元素自创一个属性，达到存储数据的目的
可以随便定义属性，不影响输出结果