1. 父子节点的操作:
append()向元素内部追回元素
prepend(): 向元素内部添加前置元素
appendTo():追回到指定的元素集合中
prependTo(): 将元素前置到指定集合中
2. 兄弟节点的操作:
after(): 在匹配的元素之后插入
before(): 在匹配的元素之前插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
<style>
table{
border:6px;
border-collapse: 0;
text-align: center;
margin: 50px auto;
}
tr{
background-color: deepskyblue;
}
td{
width: 200px;
height: 50px;
line-height: 30px;
}
th{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<table cellspacing="0" border="2">
<!--<caption>金角大王的晚餐食材</caption>-->
<tr>
<th>食材名称</th>
<th>数量</th>
<th>功效</th>
<th>食用方法</th>
<th>添加方式</th>
</tr>
<!--<tr>-->
<!--<td>唐僧</td>-->
<!--<td>约60kg</td>-->
<!--<td>一口长生不老你说值多少钱？</td>-->
<!--<td>细皮嫩肉的哇咔咔蒸</td>-->
<!--<td></td>-->
<!--</tr>-->
<tr id="zhuge">
<td>朱哥</td>
<td>约20T</td>
<td>据说吃了能high上天</td>
<td>皮糙肉厚的炸个一百八十分钟</td>
<td>此行是本来存在的节点</td>
</tr>
<!--<tr>-->
<!--<td>朱老师</td>-->
<!--<td>约20kg</td>-->
<!--<td>吃一口什么html、css、php都是浮云随便弄</td>-->
<!--<td>需要在太上老君炼丹炉里炼三天三夜方可食用</td>-->
<!--<td></td>-->
<!--</tr>-->
<!--我是 tr4.appendTo('table')添加的-->
<!--<tr> -->
<!--<td>小树哥</td>-->
<!--<td>约20g</td>-->
<!--<td>啥看不见？传说吃了有某种神秘的功效</td>-->
<!--<td>为了能大家享用只能加水1吨用三昧真火熬一天</td>-->
<!--</tr>-->
</table>
<script>
var table=$('table')
var tr=document.getElementById('zhuge')
//prependTo添加//////////////////////////////////////////////////////////////////////////////////////////
var caption=$('<caption>(金角大王的晚餐食材-我是使用prependTo添加的）</caption>')
caption.prependTo('table')
caption.append('(append)')
caption.prepend('(prepend)')
//before添加//////////////////////////////////////////////////////////////////////////////////////////
var tr2=$(' <tr>' +
' <td>唐僧</td>' +
' <td>约60kg</td>' +
' <td>一口长生不老你说值多少钱？</td>' +
' <td>细皮嫩肉的哇咔咔蒸</td>' +
' <td>此行是使用before添加的</td>' +
' </tr>')
$('#zhuge').before(tr2)
//after添加//////////////////////////////////////////////////////////////////////////////////////////
var tr3=$(
'<tr>'+
'<td>朱老师</td>'+
'<td>约20kg</td>'+
'<td>吃一口什么html、css、php都是浮云随便弄</td>'+
'<td>需要在太上老君炼丹炉里炼三天三夜方可食用</td>'+
'<td>此行是使用after添加的</td>'+
'</tr>')
$('#zhuge').after(tr3)
//appendTo添加//////////////////////////////////////////////////////////////////////////////////////////
var tr5=$('<tr>' +
'<td>小树哥</td>' +
'<td>约20g</td>' +
'<td>啥看不见？传说吃了有某种神秘的功效</td>' +
'<td>为了能大家享用只能加水1吨用三昧真火熬一天</td>'+
'<td>此行是使用appendTo添加的</td>'+
'</tr>')
tr5.appendTo('table')
</script>
</body>
</html>