JavaScript对HTML元素的增加与删除实训

最新推荐文章于 2023-10-18 18:51:24 发布

₯㎕๓安笙

最新推荐文章于 2023-10-18 18:51:24 发布

阅读量230

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/Cry859098570/article/details/105646756

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在JavaScript中可以对HTML中的元素进行增加或者删除

添加：

首先我们必须先创建该元素
使用document.createElement()，传入元素名即可创建，可使用var类型接收然后对该标签进行设置。
然后将其追加到已有元素
appendChild()方法
使用父元素的对象调用appendChild()方法，传入需要添加的元素，可把元素添加到父元素最后面
insertBefore()方法
传入2个参数，可添加到父元素中某个元素的前面，参数1：所添加的元素，参数2：哪个元素前面

删除：

删除某个 HTML 元素，您需要知晓该元素的父元素：
然后使用父元素调用removeChild()，传入要删除元素的对象即可删除

示例：

在这里插入图片描述
使用这几个方法我们可以实现页面提交附件增加与删除的效果，如上图。

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function add(){
				// 获取需要添加或删除的父元素
				var tr=document.getElementById("tr");
				//创建一个新的<br>元素
				var br=document.createElement("br");
				//创建一个新的<input>元素
				var file=document.createElement("input"); 
				file.type="file";
				//创建一个新的<button>素并添加点击事件
				var remove=document.createElement("button");
				remove.type="button";
				remove.style.marginTop="5px";
				remove.innerHTML="删除";
				remove.addEventListener('click',function(){
					//移除元素
					tr.removeChild(remove);
					tr.removeChild(file);
					tr.removeChild(br);
				})
				//把创建的元素添加
				tr.appendChild(br);
				tr.appendChild(file);
				tr.appendChild(remove);
			}
		</script>
	</head>
	<body>
		<form action="#" enctype="multipart/form-data" method="post">
			<table border="1" cellspacing="0" cellpadding="10">
				<tr><th colspan="2">文件提交</th></tr>
				<tr>
					<td align="center">文件</td>
					<td id="tr">
						<input type="file" />
						<input id="more" type="button" value="更多文件" onclick="add()"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit"  value="提交"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

₯㎕๓安笙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对HTML元素的增加与删除实训

在JavaScript中可以对HTML中的元素进行增加或者删除添加：首先我们必须先创建该元素使用document.createElement()，传入元素名即可创建，可使用var类型接收然后对该标签进行设置。然后将其追加到已有元素使用已有元素的对象调用appendChild()方法可把元素追加到已有元素删除：删除某个 HTML 元素，您需要知晓该元素的父元素：然后使用父元素调...
复制链接

扫一扫

专栏目录