动态按钮创建，元素的创建和追加

最新推荐文章于 2022-02-17 13:25:48 发布

原克技术

最新推荐文章于 2022-02-17 13:25:48 发布

阅读量142

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44432032/article/details/114163081

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="main">
		<button type="button" onclick="fun()">1</button>
	</div>
</body>
<script>
	// 这里主要使用的方法是创建元素document.createElement和把创建的元素追加到页面中document.body.appendChild
	var i=0;
	function fun(){
		var btn = document.createElement("input");		//创建元素
		btn.type="button";								//元素属性
		
		btn.value="第"+(i++)+"个按钮";					//元素属性
		btn.addEventListener("click",fun);				//添加事件
		document.body.appendChild(btn);					//添加到页面中
		btn=null;
		
	}
</script>
</html>