DOM 动态添加元素以及删除元素示例

最新推荐文章于 2022-10-20 10:28:07 发布

kakunaka

最新推荐文章于 2022-10-20 10:28:07 发布

阅读量585

点赞数

分类专栏： DHTML 文章标签： java javascript ViewUI

DHTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript来动态地添加和删除DOM元素。具体实现了用户输入名称后，点击按钮即可在页面的表格中添加一行显示该名称，并提供一个删除按钮用于移除该行。

摘要由CSDN通过智能技术生成

DOM 的简单操作示例


<html>
	<head>
		<title>DOM-动态添加和删除元素</title>
		<style type="text/css">
			body,td,caption,input{
				font-size:12px;
			}
		</style>
		<script language="javascript">
			var count =0;
			//添加新用户的操作
			function addNewUser(){
				//得到文本框对象
				var objName = document.getElementById('name');
				if(objName.value==""){
					alert("用户名不能为空！");
					objName.focus();
					return;
				}else{
					count++;
					//先创建行tr
					var row = document.createElement("tr");
					//设置行对象的ID属性为用户输入的用户名称
					row.setAttribute("id",objName.value+count);

					//创建td对象
					var column = document.createElement("td");
					//td对象下添加子节点 - 内容 TextNode 对象
					column.appendChild(document.createTextNode(objName.value));
					//row对象将td对象添加为子节点对象
					row.appendChild(column);

					//再创建删除按钮
					var delBtn = document.createElement("input");
					//类型
					delBtn.setAttribute("type","button");
					//文本
					delBtn.setAttribute("value","Delete");

					//设置对象的事件处理 - 所调用的函数
					var name = objName.value+count;
					delBtn.onclick= function(){delUser(name);};

					column = document.createElement("td");
					column.appendChild(delBtn);

					//行对象添加
					row.appendChild(column);
					//添加这一行到tbody中
					document.getElementById('userList').appendChild(row);
					objName.value="";
				}
			}
			//删除元素
			function delUser(name){
				if(name!=null){
					var objRow = document.getElementById(name);
					var objTBODY = document.getElementById("userList");
					//删除
					objTBODY.removeChild(objRow);
				}
			}
		</script>
	</head>
	<body>
		<table align="center" width="40%" border="1" cellspacing="0">
			<caption align="center">动态添加用户</caption>
			<tr>
				<td>添加新的用户名</td>
				<td>
					<input type="text" id="name">  <input type="button" value="添 加" onClick="addNewUser()">
				</td> 
			</tr>
			<tr>
				<td colspan="2">用户信息</td>
			</tr>	
			<!--表格主体-->
			<tbody id="userList"></tbody>
		</table>
	</body>
</html>