JS动态操作页面元素

最新推荐文章于 2024-06-15 21:20:00 发布

chinaunderworld

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量311

点赞数

文章标签： div function border input html

本文链接：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>

chinaunderworld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动态操作页面元素

MyHtml.html var count=0; function getAdd(){ var div_con=document.getElementById("div_con"); var inp_add=document.createElement("input"); //创建节点元素,类型为input inp_add.
复制链接

扫一扫