JS动态操作页面元素_javascript可以动态操作form里面的图形界面元素-CSDN博客

本文链接：https://blog.csdn.net/chinaunderworld/article/details/6549621

<html>
	<head>
		<title>MyHtml.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<script type="text/javascript">
		var count=0;
		function getAdd(){
			var div_con=document.getElementById("div_con");
			var inp_add=document.createElement("input");   //创建节点元素,类型为input
			inp_add.name="inp_add_"+count++;    //为节点元素添加name属性
			inp_add.setAttribute("value",inp_add.name);  //为节点元素添加value属性
			inp_add.setAttribute("onclick","showInfos(this)");  //为节点元素添加onclick事件(处理函数，并把节点元素本事传过去)
			div_con.appendChild(inp_add);    //将创建好的节点元素加入到容器(div)中
		}
		function showInfos(ele){
			alert("name**---*--"+ele.name+"   value:--"+ele.value);
			var ele_tab=document.getElementById("tid_one");
			ele_tab.style.backgroundColor="green";   //动态改变样式			
		}
	</script>
	<body>
		This is my HTML page.
		<br>
		<table id="tid_one" border="1" bgcolor="red">
			<tr>
				<th>
					第一列
				</th>
			</tr>
			<tr>
				<td>
					我是第一列
				</td>
			</tr>
		</table>
		<button id="btn_add" οnclick="getAdd()" value="getAdd">
			getAdd
		</button>
		<div id="div_con"
			style="display: block; width: 600px; height: 600px; background-color: green;"></div>
	</body>
</html>