版权声明：本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。 https://blog.csdn.net/qq_30225725/article/details/89222866
更多免费教学文章请关注这里
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>
运行结果：
