JavaScript学习笔记19

最新推荐文章于 2024-07-12 16:27:40 发布

逆流！

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量85

点赞数

分类专栏： javaScript学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_38720471/article/details/109206065

版权

javaScript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

操作元素

创建节点的方法
document.createElement(“div”);//创建节点
加入节点
parentNode.appendChild(childElement);//在父亲节点下，在最后一个孩子后加入节点
. parentNode.insertBefore(newNode,beforeNode);//在父亲节点下，在一个节点前加入节点
删除节点的方法
parentNode.removeChild(childNode);//删除父节点的孩子节点
node.remove()//删除节点
替换节点的方法
parentNode.replaceChild(newNode,oldNode)//替换节点
代码实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript">
			function addFileItem(){
			//1.创建一个<tr>
			//1.1创建一个INPUT
				var fileInput=document.createElement("input");
				fileInput.type="file";
				fileInput.name="photo";
			//1.2创建另一个input
				var buttonInput=document.createElement("input");
				buttonInput.type="button";
				buttonInput.value="删除";
				buttonInput.onclick=delFileItem;//!!!!
			//1.3创建<td>
				var td1=document.createElement("td");
				td1.innerHTML="&nbsp;";
			//1.4创建td2
				var td2=document.createElement("td");
			//1.5t<td><input></input></td>
				td2.appendChild(fileInput);
				td2.appendChild(buttonInput);
			//1.6	
				var newRow=document.createElement("tr");
				newRow.appendChild(td1);
				newRow.appendChild(td2);
				
				//console.info(newRow);
			//2将创建的tr加入到指定位置
			//2.1获取添加位置的行
				var lastRow=document.getElementById("lastRow");
			//2.2找到父亲节点
				var pNode=lastRow.parentNode;
			//2.3添加到指定的位置
				pNode.insertBefore(newRow,lastRow);//在节点前插入
				//pNode.replaceChild(newRow,lastRow);//替代节点
			}
			
			
			function delFileItem(){
				var delRow=this.parentNode.parentNode;
				console.info(delRow);
				console.info(delRow.parentNode);
				delRow.remove();//.remove删除自己  .removeChild(a)删除孩子节点a
				//delRow.parentNode.removeChild(delRow);
			}
		
		</script>
	
	}
</head>
<body>
	<h2>用户注册</h2>
	<form method="get">
		<table id="table1" border="1" width="40%">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" id="username" value="请输入姓名"></td>
			</tr>
			<tr>
				<td>照片</td>
				<td>
					<input type="file" name="photo" id="photo">
					<input type="button" value="添加" onclick="addFileItem()"/>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="file" name="photo" id="photo">
					<input type="button" value="删除" onclick="delFileItem()"/>
				</td>
			</tr>
			<tr id="lastRow">
				<td colspan="2" align="center">
					<input type="submit" value="提交"/>
					<input type="reset" value="重置"/>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>```

逆流！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记19

操作元素创建节点的方法document.createElement(“div”);//创建节点加入节点parentNode.appendChild(childElement);//在父亲节点下，在最后一个孩子后加入节点. parentNode.insertBefore(newNode,beforeNode);//在父亲节点下，在一个节点前加入节点删除节点的方法parentNode.removeChild(childNode);//删除父节点的孩子节点node.remove()/
复制链接

扫一扫