dom增加内容和删除内容_清除dom接口中文本数据-CSDN博客

本文链接：https://blog.csdn.net/weixin_45844109/article/details/119454498

这篇博客介绍了如何使用JavaScript的DOM操作来动态地向表格中添加和删除内容。通过创建新的行元素并填充数据，然后将其添加到表格的tbody中实现添加功能。删除功能则是通过为每个删除链接绑定点击事件，弹出确认对话框并移除对应的行。文中还对比了一种更简洁的实现方式，通过设置tr的innerHTML直接插入内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习JavaScript，简单记录一下用dom实现增加和删除内容

首先是一种比较麻烦但是却比较容易理解的方法
实现删除的流程如下：
在这里插入图片描述实现增加的流程如下：
运行初始页面如下：
点击delete

下面这是添加功能:
随便在里面写点啥，点submit

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>05-添加删除记录</title>
	</head>
	<body>
		<table border="1px" id="employeeTable">
			<tr>
				<th>Header</th>
				<th>Email</th>
				<th>薪资</th>
				<th></th>
				
			</tr>
			<tr>
				<td>TOM</td>
				<td>tom@123</td>
				<td>5000</td>
				<td><a href="#">delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@123</td>
				<td>5000</td>
				<td><a href="#">delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@123</td>
				<td>5000</td>
				<td><a href="#">delete</a></td>
			</tr>
		</table>
		<div style="border: 1px solid; width: 300px; height: 300px;">
			<h3>添加新员工</h3>
			<p>name</p>
			<input type="text" name="" id="name" value="" />
			<p>Email</p>
			<input type="text" name="" id="Emali" value="" />
			<p>salary</p>
			<input type="text" name="" id="salary" value="" />
			<button id="su">submit</button>
		</div>
		<script type="text/javascript">
			//删除tr的想要函数
			function delA(){
				var allA=document.getElementsByTagName("a");
			//对所有的标签a都进行遍历
			for(var i=0; i<allA.length ; i++){
				allA[i].onclick=function(){
					//点击超链接后需要删除超链接所在的哪行
					//首先是获取到超链接a所在的那一行
				var tr=this.parentNode.parentNode;	
				//获取要删除的员工的名字
				var name=tr.children[0].innerHTML;
				  var ok=confirm("确认删除"+name+"吗？");  
					//alert("hello");
					if(ok){
						tr.parentNode.removeChild(tr);
					}
				}
			}
			}
			function myonclick(idstr,fun){
				var btn=document.getElementById(idstr);
				btn.onclick=fun;
			}
			//getElementsByTagName 通过这个方法找到标签为a的节点
			var allA=document.getElementsByTagName("a");
			//对所有的标签a都进行遍历
			
			/*
			 添加员工的功能，点击添加员工后，将员工的信息添加到表格里
			 */
			//首先是给按钮绑定一个单击事件
			myonclick("su",function(){
//				//alert("你好，张三！");
				//获取到输入框里面的值
				var name=document.getElementById("name").value;
				var Emali=document.getElementById("Emali").value;
				var salary=document.getElementById("salary").value;
				//var deltext=document.getElementById("delete").value;
				
				//alert(name.value);
				//创建一个tr 用来存放td
				var tr=document.createElement("tr");
				//创建四个td 用来放内容
				var nametd=document.createElement("td");
				var emalitd=document.createElement("td");
				var salarytd=document.createElement("td");
				var atd=document.createElement("td");
				//创建一个a
				var a=document.createElement("a");
				
				//创建文本节点
				var nameText=document.createTextNode(name);
				var emailText=document.createTextNode(Emali);
				var salaryText=document.createTextNode(salary);
				var delText=document.createTextNode("Delete");
					//将创建好的文本内容放到td里面
				nametd.appendChild(nameText);
				emalitd.appendChild(emailText);
				salarytd.appendChild(salaryText);
				
				//向a中添加文本
				a.appendChild(delText);
				//将a添加到td里面
				atd.appendChild(a);
				//td.appendChild(nametext);
				//将创建好的td添加到tr里面
				tr.appendChild(nametd);
				tr.appendChild(emalitd);
				tr.appendChild(salarytd);
				tr.appendChild(atd);
			    a.href="javascript: ;"
			     a.onclick=delA;
			    //获取table
			    var employeeTable=document.getElementById("employeeTable");
			   //获取employeeTable里面的tbody
			 var tbody=employeeTable.getElementsByTagName("tbody")[0];
			   //将tr添加到tbody中
			    tbody.appendChild(tr);
			    
			})
		</script>
	</body>
</html>

上面这个添加确实比较麻烦，但过程比较清晰
有个简单的方法是

var tr=document.createElement("tr");
			    
			    //2设置tr里面的内容
			    tr.innerHTML="<td>"+name+"</td>"+
			                 "<td>"+Emali+"</td>"+
			                 "<td>"+salary+"</td>"+
			                 "<td><a href='javascript: ;'>delete</a></td>";
			     
			     //为新添加的a再绑定一次单击响应函数
			     var a=tr.getElementsByTagName("a")[0];
			     a.onclick=delA;
			    //获取table
			    var employeeTable=document.getElementById("employeeTable");
			   //获取employeeTable里面的tbody
			 var tbody=employeeTable.getElementsByTagName("tbody")[0];
			   //将tr添加到tbody中
			    tbody.appendChild(tr);