DOM中插入和删除节点（insertBefore()方法和removeChild()方法）

最新推荐文章于 2022-04-13 08:33:08 发布

yayun0516

最新推荐文章于 2022-04-13 08:33:08 发布

阅读量3.9k

点赞数

分类专栏： javaScript 文章标签： .appendChild .removeChild javascript dom html

本文链接：https://blog.csdn.net/yayun0516/article/details/41594619

版权

javaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

.html代码如下：

<pre name="code" class="javascript"><html>
<head>
<title>插入节点</title>
	<style type="text/css">
		table{
			width:350px;
			
		}
		tr{
			text-align:center
		}
		td,th{
			width:80px;
			border:1px solid #fba;
		}
		
	</style>
	<script type="text/javascript">
		function insertRow(){
			var tr = document.createElement('tr');//创建一行
			var table = document.getElementsByTagName("table")[0];//找到table
			var td1 = document.createElement("td");//创建td1
                        var txt_id=document.getElementById("txt_id");
			td1.innerText =txt_id.value;
			var td2 = document.createElement("td");//创建td2
                        var txt_name=document.getElementById("txt_name");
			td2.innerText = txt_name.value;
			var td3 = document.createElement("td");//创建td3
                        var txt_sex=document.getElementById("txt_sex");
			td3.innerText = txt_sex.value;
                         /*tr.appendChild(td1);//方式一添加
                         tr.appendChild(td2);
                         tr.appendChild(td3);*/
			tr.insertBefore(td1,null);//方式二添加
			tr.appendChild(td3);
			tr.insertBefore(td2,td3);//td2是要插入的,td3是td2的后面
			table.appendChild(tr);
		}	
		function deleteRow(){
			var tr = document.getElementsByTagName("tr");
			var table = document.getElementsByTagName("table")[0];
			table.removeChild(tr[tr.length-1]);//删除最后一条
		}
	</script>
</head>
<body >
	
        学号:<input type="text"  id="txt_id"/><br/>
        姓名:<input type="text"  id="txt_name"/><br/>
        性别:<input type="text"  id="txt_sex"/><br/>
        <input type="button" value="增加一行" οnclick="insertRow()"/><br/>
	<input type="button" value="删除" onclick = "deleteRow()"/>
	<table >
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
		</tr>
	</table>
</body>
</html>

效果如下：