Javascript第五章删除、克隆、插入、替换方法源码第九课-CSDN博客

本文链接：https://blog.csdn.net/qq_30225725/article/details/89222866

本文聚焦JavaScript中DOM元素的删除、克隆、插入和替换操作，讲解了firstChild、firstElementChild、lastChild、lastElementChild、nextSibling、nextElementSibling、previousSibling和previousElementSibling等属性的使用，并通过实例演示了元素的插入方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述
更多免费教学文章请关注这里
firstChild　　　　　　　　firstElementChild第一个子节点

lastChild　　　　　　　　lastElementChild最后一个子节点

nextSibling　　　　　　 nextElementSibling下一个子节点

previousSibling　　　　 previousElementSibling前一个子节点

插入：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		//在表格中的第三行，插入一个新行
		function doInsert(){
			
			var tr=document.createElement("tr");
			var td=document.createElement("td");
			td.colSpan="5";
			td.innerHTML="你好"
			tr.appendChild(td)
			
			var tb=document.getElementById("tb")
			var trs=document.getElementsByTagName("tr");
			tb.insertBefore(tr,trs[2])
		}
	</script>
</head>
<body>
	<input type="button" name="" id="" value="插入" onclick="doInsert()" />
	<table width="500px" align="center" border="1px">
	<!--	table>(thead#th>tr>th{th$}*5)+tbody#tb>(tr>td{td$}*5)*4-->
		<thead id="th">
			<tr>
				<th>th1</th>
				<th>th2</th>
				<th>th3</th>
				<th>th4</th>
				<th>th5</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
		</tbody>
	</table>
	
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		//在表格中的第三行，插入一个新行
		function doInsert(){
			
			var tr=document.createElement("tr");
			var td=document.createElement("td");
			td.id="mystr"
			td.colSpan="5";
			td.innerHTML="你好"
			tr.appendChild(td)
			
			var tb=document.getElementById("tb")
			var trs=document.getElementsByTagName("tr");
			tb.insertBefore(tr,trs[2])
		}
		//将表格主体中的第一行删除
		function dodelete(){
			
			var tt=document.getElementById("tb");
			var dd=tt.getElementsByTagName("tr")
		
			tt.removeChild(dd[0]);
			
			
		}
		
		//将表格中主体的第4行替换为一个新行
		function doupdate(){
			var cc=document.createElement("cc");
			
			var ff=document.createElement("ff");
			ff.colSpan="5"
			ff.innerHTML="dddddddd";
			cc.appendChild(ff)
				var aa=document.getElementById("tb");
			var bb=aa.getElementsByTagName("tr")
	
	
			aa.replaceChild(cc,bb[3]);
		
			
		}
		//将表格主体中的第二行克隆一份，然后添加到最后一行
		
		function doclone(){
			
			var a=document.getElementById("tb");
			var b=a.getElementsByTagName("tr");
			var c=b[1].cloneNode(true);   //将第二行的内容克隆出来   flase内容虽然没有，但是属性是有的
			
			
			tb.appendChild(c)   //默认在后面加入
			//如果要是加载第三行
			
			
			
		}
	</script>
</head>
<body>
	<input type="button" name="" id="" value="插入" onclick="doInsert()" />
	<input type="button" name="" id="" value="删除" onclick="dodelete()" />
	<input type="button" name="" id="" value="替换" onclick="doupdate()" />
	<input type="button" name="" id="" value="克隆" onclick="doclone()" />
	<table width="500px" align="center" border="1px">
	<!--	table>(thead#th>tr>th{th$}*5)+tbody#tb>(tr>td{td$}*5)*4-->
		<thead id="th">
			<tr>
				<th>th1</th>
				<th>th2</th>
				<th>th3</th>
				<th>th4</th>
				<th>th5</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
			<tr>
				<td>td1</td>
				<td>td2</td>
				<td>td3</td>
				<td>td4</td>
				<td>td5</td>
			</tr>
		</tbody>
	</table>
	
</body>
</html>