一、展示
1、初始页面
2、各追加1次
3、各追加2次
4、各追加3次
二、代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>html</title>
<style>
body{margin: 20px;}
th{
padding: 5px;
}
button{
margin: 20px;
}
table{
border-collapse: collapse; /**设置小表格之间的间距为0*/
border-right:1px solid orange;
border-top:1px solid orange;
}
table tr td,th{
border-left:1px solid orange;
border-bottom:1px solid orange;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Append追加
<table class="append-add">
<thead>
<tr>
<th>姓名</th>
<th>年级</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr/>
Html追加
<table class="html-add">
<thead>
<tr>
<th>姓名</th>
<th>年级</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="button1">append追加</button>
<button id="button2">html追加</button>
</body>
<script>
//append追加按钮
$('#button1').click(function () {
let html = getTableHtml();
$('.append-add tbody').append(html);
});
//html追加按钮
$('#button2').click(function () {
let html = getTableHtml();
$('.html-add tbody').html(html);
});
/**
* 获取表格tr数据
* @returns {string} 拼接的字符串
*/
function getTableHtml() {
return `<tr>
<td>姓名1</td>
<td>年级1</td>
<td><input value="1"/></td>
</tr>
<tr>
<td>姓名2</td>
<td>年级2</td>
<td><input value="2"/></td>
</tr>
<tr>
<td>姓名3</td>
<td>年级3</td>
<td><input value="3"/></td>
</tr>`;
}
</script>
</html>
三、总结
它们的功能缺失有点相似，但是实际上本质上是有区别:
append()函数是为指定元素尾部附加内容，
而html()函数是重置元素内部的html内容。