实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>appendTo()，preppendTo()，insertAfer()，insertBefore()用法</title>
<style type="text/css">
table{
width: 400px;
border: 1px solid #888;
border-radius: 10px;
box-shadow: 5px 5px 5px #666;
margin: auto;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
caption{
margin: 20px auto;
}
td,th{
/*border: 1px solid #888; */
height: 50px;
}
img{
height: 120px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<table>
<caption>名片卡</caption>
<tr>
<th>姓名：</th>
<!-- <td colspan="3">XXX</td> -->
</tr>
<tr>
<th>性别：</th>
<!-- <td>X</td> -->
<td colspan="2" rowspan="2" id="img"><img src="images/boy.jpg"></td>
</tr>
<tr>
<th>出生年月：</th>
<!-- <td>XXXXXXXXXXX</td> -->
</tr>
<tr>
<th>编码：</th>
<!-- <td colspan="3">XXXXXXXXXXXXXXXXX</td> -->
</tr>
</table>
<button>高圆圆</button>
<button>范冰冰</button>
<button>江疏影</button>
<button>孙俪</button>
<button>赵丽颖</button>
<div>
<ul>
<h2>姓名：</h2>
<li>高圆圆</li>
<li>范冰冰</li>
<li>江疏影</li>
<li>孙俪</li>
<li>赵丽颖</li>
</ul>
<ul>
<h3>出生年月：</h3>
<li>1975年03月06日</li>
<li>1985年09月04日</li>
<li>1978年05月20日</li>
<li>1982年08月16日</li>
<li>1987年12月31日</li>
</ul>
<ul>
<h4>编号：</h4>
<li>523987511485565</li>
<li>965874301259874</li>
<li>231597456485475</li>
<li>452387200156846</li>
<li>832657410236541</li>
<li>385426854125725</li>
</ul>
<ul>
<h5>头像</h5>
<li><img src="images/gyy.jpg"></li>
<li><img src="images/fbb.jpg"></li>
<li><img src="images/jsy.jpg"></li>
<li><img src="images/sl.jpg"></li>
<li><img src="images/zly.jpg"></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(0)').on('click',function(){
$('ul:eq(0) li:first').insertAfter($('tr:eq(0)>th'))
$('<td>').html('女').insertAfter($('tr:eq(1)>th'))
$('h3+li').insertAfter($('tr:eq(2)>th'))
$('h4+li').insertAfter($('tr:eq(3)>th'))
$('tr:eq(1)>td>img').remove('img')
$('h5+li').appendTo($('#img'))
})
$('button:eq(1)').on('click',function(){
$('ul:eq(0) li').eq(1).insertAfter($('tr:eq(0)>th'))
$('<td>').html('女').insertAfter($('tr:eq(1)>th'))
$('ul:eq(1) li').eq(1).insertAfter($('tr:eq(2)>th'))
$('ul:eq(2) li').eq(1).insertAfter($('tr:eq(3)>th'))
$('tr:eq(1)>td>img').remove('img')
$('ul:eq(3) li').eq(1).appendTo($('#img'))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
