js自学网站推荐:http://www.51zxw.net/study.asp?vip=4857021
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
margin:20px;
}
</style>
</head>
<body>
<input type="button" id="Button1" value="测试" οnclick="addInput()">
<hr>
<script>
var i =0;
function addInput() {
//使用dom创建元素的方法
var o = document.createElement("input");
o.type = "button";
o.value = "button" + i++;
//绑定事件
o.addEventListener("click",addInput);
document.body.appendChild(o);
/*及时解除不再使用的变量引用,
即将值赋值为null,
有利于提高代码的运行效率
*/
o = null;
}
</script>
</body>
</html>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/b708e2f22075e288ebc1f3442cd2fd67.png)