1. 文档操作：因为方法是jQuery的方法，所以先写 jQuery对象
内容简要：
1.1 追加标签 (不同级)
1.2 前追加标签 (不同级)
1.3 后置标签 (同级)
1.4 前置标签 (同级)
1.1 标签内部的后面追加子标签，不同级
1.1.1 jQuery对象.append(DOM对象)：jQuery对象追加DOM对象
示例：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
var liEle4 = document.createElement('li'); //增加li标签，jQuery没有这方法。
liEle4.innerText = '4'; //设置内容
$('ul').append(liEle4); //追加li标签
浏览器显示：
1
2
3
4
1.1.2 jQuery对象.appendTo(DOM对象)：jQuery对象追加到DOM对象
var liEle0 = document.createElement('li');
liEle0.innerText = '0';
$(liEle0).appendTo($('ul')[0]);
浏览器显示：
1
2
3
0
1.2 标签内部的前面追加子标签，不同级
1.2.1 jQuery对象.prepend(DOM对象)：jQuery对象前追加DOM对象
var liEle0 = document.createElement('li');
liEle0.innerText = '0';
$('ul').prepend(liEle0);
浏览器显示：
0
1
2
3
1.2.2 jQuery对象.prependTo(DOM对象)：jQuery对象前追加到DOM对象
var liEle4 = document.createElement('li');
liEle4.innerText = '4';
$(liEle4).prependTo($('ul')[0]);
浏览器显示：
4
1
2
3
1.3 后置标签，同级
jQuery对象.after(DOM对象)：jQuery对象后面放置(DOM对象)
jQuery对象.insertAfter(DOM对象)：jQuery插入到(DOM对象)的后面
1.4 前置标签，同级
jQuery对象.before(DOM对象)：jQuery对象前面放置(DOM对象)
jQuery对象.insertBefore(DOM对象)：jQuery插入到(DOM对象)的前面
1.5 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
示例：表格按行删除，remove()；添加一行，append()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格按行删除</title>
</head>
<body>
<table border="5">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>marry</td>
<td>18</td>
<td><input type="button" value="删除"></td>
</tr>
<tr>
<td>2</td>
<td>tom</td>
<td>18</td>
<td><input type="button" value="删除"></td>
</tr>
<tr>
<td>3</td>
<td>aj</td>
<td>18</td>
<td><input type="button" value="删除"></td>
</tr>
</tbody>
</table>
<input type="button" value="添加一行" id="d1">
<script src="jquery-3.4.1.min.js"></script>
<script>
//添加一行
$('body').on('click','#d1',function () {
var trEle = document.createElement('tr');
$(trEle).html('<td></td><td></td><td></td><td><input type="button" value="删除"></td>');
$('tbody').append(trEle);
});
//删除，找到tbody点击里面的input标签触发当前点击的标签this找到tr删除
//tboby里面input有3个，而this是当前点击的DOM对象，也就是当前点击的具体标签
//如果使用.click无法删除新添加的一行，但使用.on('click')就可以，只要需要删除的tr标签在tbody里面就行。
$('tbody').on('click','input',function () {
$(this).parent().parent().remove();
});
</script>
</body>
</html>
1.6 替换
replaceWith()
replaceAll()
1.7 克隆
clone(); //克隆标签，但是不克隆标签绑定的事件，也就是说克隆出来的新标签，点击它无法继续克隆新的标签。
clone(true); //克隆标签，并且克隆标签绑定的事件
示例：点击克隆按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击复制按钮-clone</title>
</head>
<body>
<button>点我送迈腾</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
//this是当前点击的DOM对象，也是具体的标签
$('button').click(function () {
$(this).clone(true).insertAfter(this);//克隆出来的新标签插入到this的后面
});
// $('button').click(function () {
// $(this).clone().insertAfter(this);
// });
</script>
</body>
</html>