Html GS交互

最新推荐文章于 2023-09-22 17:43:14 发布

情缘灬國風

最新推荐文章于 2023-09-22 17:43:14 发布

阅读量772

点赞数

本文链接：https://blog.csdn.net/shaoyanyu/article/details/78454000

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>DOM学习</title>
	</head>

	<body>
	用户名:<input type="text" id="username" /><br> 密   码:
	<input type="text" id="password" /><br>
	<input type="button" id="add" value="添加" onclick="add()"/><br>
	<table border="1" id = "t">
	<tr>
	<th>用户名</th>
	<th>密码</th>
	</tr>
	<tr>
	<td>zhangs</td>
	<td>123</td>
	</tr>
	</table>

	<script type="text/javascript">


	function add(){

	//获取元素
	//document 操作页面的对象
	//getElementById 根据id获取标签
	//value 输入框里面的值
	var username= document.getElementById("username");
	//从输入框里面取值
	var name = username.value;
	//------------------密码---------
	var password = document.getElementById("password").value;

	//动态添加子节点
	var tr = document.createElement("tr");//创建节点,参数是节点名
	var td0 = document.createElement("td");
	//文字，在html中叫文本标签
	var name1 = document.createTextNode(name);//创建文本标签
	//将文字标签放入td
	td0.appendChild(name1);
	//加入密码
	var td1 = document.createElement("td");
	var pass1 = document.createTextNode(password);
	td1.appendChild(pass1);
	//将td tr
	tr.appendChild(td0);
	tr.appendChild(td1);
	//将tr 放入表格
	var tabel = document.getElementById("t");
	tabel.appendChild(tr);
	}

	</script>

	</body>
	</html>

关注