用JavaScript编写动态输入框

最新推荐文章于 2024-04-26 16:47:03 发布

路边小吕

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量969

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qiandaiyangzi/article/details/127811510

版权

执行效果：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>增加与删除</title>
	</head>
	<body>
		<!-- 新增按钮 -->
		<input type="button" onclick="add()" value="新增" />
		<ul>
			<li>
				<p>
					<!-- 文本框 -->
					<input type="text" placeholder="请输入内容">
					<!-- 删除按钮 -->
					<input type="button" onclick="del(this)" value="删除">
				</p>
			</li>
		</ul>
		<script>
			// 添加文本框
			function add(){
				// 新建li标签对象
				var liNode = document.createElement("li");
				// 新建p标签对象
				var pNode = document.createElement("p");
				// 向p标签中加入html元素 --- 文本框 & 删除按钮
				pNode.innerHTML = "<input  type='text' placeholder='请输入内容' />&nbsp;<input type='button' onclick='del(this)' value='删除' />";
				//将p标签写入li标签中
				liNode.appendChild(pNode);
				//获取ul标签对象
				var ulNode = document.getElementsByTagName("ul")[0];
				//添加li标签
				ulNode.appendChild(liNode);
			}
			
			// 删除文本框
			function del(tNode){
				// 获取li标签对象
				var liNode = tNode.parentNode.parentNode;
				// 获取ul标签对象
				var ulNode = document.getElementsByTagName("ul")[0];
				// 删除li标签对象
				ulNode.removeChild(liNode);
			}
		</script>
	</body>
</html>