JQuery文档操作

1.内部添加
1.在指定元素内部底部添加

// 在指定元素内部底部添加
$('.parent').append($son);
$son.appednTo('.parent'));

2.在指定元素内部顶添加

// 在指定元素内部顶添加
$('.parent').prepend($son);
$son.prependTo('.parent'));

2.外部添加
3.在指定元素外部的前面添加元素

// 在指定元素外部的前面添加元素
$('.parent').after($son);
$son.insertAfter('.parent'));

4.在指定元素外部的前面添加元素

// 在指定元素外部的后面添加元素
$('.parent').before($son);
$son..insertBefore('.parent'));

3.删除节点

// 删除指定节点
$('div').remove();
// 删除指定节点中含有 .active 类的节点
$('div').remove('.active');

// 删除指定节点的内容与子元素
$('div').empty();

// 删除指定节点
$('div').detach();
$('div').detach('.active');

PS
remove与detach的区别：
remove不仅会清除指定节点，节点上绑定的事件、数据也会一并清除；
detach只会清除节点，绑定的事件以及数据不会被清除。
替换节点

<h1>h1</h1>
<h1>h1</h1>

let $h6 = $('<h6>h6</h6>');
$('h1').replaceWith($h6);

$h6.replaceAll('h1');

克隆节点
1.浅复制，只会复制内容，不会复制事件

// 浅复制，只会复制内容，不会复制事件
let $newDiv = $('div').clone(false);

2.深复制，即会复制内容，也会复制事件

// 深复制，即会复制内容，也会复制事件
leT $newDiv = $('div').clone(true);

内容操作：
html() 该方法获取html元素的内容，如：var var1=$(“p”).html();//获取P元素内的内容
text() 获取或设置某个html元素的内容
val() 获取元素的Value值
children() 获取html元素的所有子节点
next() 获取html元素后紧邻的同辈节点
prev() 获取html元素前紧邻的同辈节点
siblings() 获取html元素前后紧邻的同辈节点