<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
table,th,td {
margin:0 auto;
text-align:center;
border:1px solid black;
border-collapse:collapse;
width:600px;height:50px;
}
</style>
</head>
<body>
<table>
<caption>商品表格</caption>
<tr class="biao">
<th>商品ID</th>
<th>名称</th>
<th>售价</th>
<th>重量</th>
<th>输出</th>
</tr>
<tr class="yuan">
<td>100</td>
<td>橘子</td>
<td>2元</td>
<td>10斤</td>
<td>20元</td>
</tr>
<tr>
<td>101</td>
<td>香蕉</td>
<td>3元</td>
<td>20斤</td>
<td>60元</td>
</tr>
<tr>
<td>102</td>
<td>苹果</td>
<td>3元</td>
<td>30斤</td>
<td>90元</td>
</tr>
</table>
<script>
//在表格后面添加一行表格
var table1 = $('<tr><td>103</td><td>苹果</td><td>3元</td><td>40斤</td><td>120元</td></tr>')
table1.appendTo('table')
//在表格前面添加一行表格
var table2 = $('<tr><td>103</td><td>苹果</td><td>3元</td><td>40斤</td><td>120元</td></tr>')
table2.prependTo('table')
//前置一个数据
table2.prepend('<td>我的</td>')
//后置一个数据
table2.append('<td>你的</td>')
//当前元素后面插入一行数据
table2.after('<tr><td>103</td><td>苹果</td><td>3元</td><td>40斤</td><td>120元</td></tr>')
//当前元素前面插入一行数据
table2.before('<tr><td>103</td><td>苹果</td><td>3元</td><td>40斤</td><td>120元</td></tr>')
//当前元素前置数据
table2.prepend('<td>不是我的</td>')
//当前元素后添加数据
table2.append('<td>好吧</td>')
</script>
</body>
</html>
父子节点：有层级关系
append():向元素内部追加元素
prepend():向元素内部添加前置数据
appendTo():追加到及合作的最后面
prependTo():将元素前置到指定集合中
兄弟节点：平级吴层级关系
after（）：在匹配元素之后插入
before（）：在匹配的元素之前插入
