一个Demo展示如何使用DOM指令手动在HTML界面中新增、删除、复制、插入HTML标签

小赵与java

已于 2024-08-29 19:15:18 修改

阅读量174

点赞数 1

文章标签： html javascript

于 2024-08-29 19:14:57 首次发布

本文链接：https://blog.csdn.net/qq_61632655/article/details/141686360

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手动生成或删除标签</title>
	</head>
	<body>
		<div>
			<table align="center">
				<tr id="tr1">
					<td id="td1" style="width: 80px;">输入框：</td>
					<td id="td2" style="width: 100px;">
						<input type="text"/>
					</td>
					<td>
						<button onclick="addLabel()">生成行</button>
					</td>
					<td>
						<button onclick="deleteLabel()">删除行</button>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var trnum = 1;
			function addLabel() {
				var trId = "tr" + trnum;
				var tr = document.getElementById(trId);//根据id获取标签对象
				var new_Tr = document.createElement("tr");//创建一个标签对象
				new_Tr.id = "tr" + (trnum+1);
				var td1 = document.getElementById("td1");
				var cloneTd1 = td1.cloneNode(true);//克隆一个标签对象
				var td2 = document.getElementById("td2");
				var cloneTd2 = td2.cloneNode(true);
				new_Tr.appendChild(cloneTd1);//为标签添加子标签
				new_Tr.appendChild(cloneTd2);
				tr.insertAdjacentElement("afterend",new_Tr);//在标签后添加其他标签
				trnum++;
			}
			
			function deleteLabel () {
				if (trnum > 1) {
					var trId = "tr" + trnum;
					var tr = document.getElementById(trId);
					tr.parentNode.removeChild(tr);//删除标签
					trnum--;
				}
			}
		</script>
		
	</body>
</html>