这一小节主要讲了HTNL DOM常见的操作，包括创建节点、查找节点、插入节点、移动节点、删除节点等。
接下来上具体的代码：
代码中的注释里有上课时所整理的部分知识点：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script src="../jquery-3.2.1/jquery-3.2.1.js"></script> ???????<script type="text/javascript"> ???????????//jQuery插入元素 ???????????// after() 在匹配的元素之后插入内容 ???????????????????????$(function() { ???????????????????????????$("#add").click(function() { ???????????????????????????????var $div4 = $("<div id=‘div4‘>div4</div>"); ???????????????????????????????$("#div2").after($div4) ???????????????????????????}); ???????????????????????}); ???????????// ???????insertAfter()与after()用法相反，意思相同 ???????????// ???????前者是： B.insertAfter( A ),意思是B插入在A的后面 ???????????// ???????后者是: A.after( B ),意思是在A后面插入B ???????????// before() 在匹配的元素之前插入内容 ???????????????????????$(function() { ???????????????????????????$("#add").click(function() { ???????????????????????????????var $div4 = $("<div id=‘div4‘>div4</div>"); ???????????????????????????????$("#div2").before($div4) ???????????????????????????}); ???????????????????????}); ???????????// ???????insertBefore()和before()用法相反，意思相同 ???????????// ???????前者是： B.insertBefore( A ),意思是B插入在A的前面 ???????????// ???????后者是: A.before( B ),意思是在A前面插入B ???????????// jQuery插入子级元素 ???????????// append() ???向匹配的元素内部追加内容 ???????????????????????$(function() { ???????????????????????????$("#add").click(function() { ???????????????????????????????var $div4 = $("<div id=‘div4‘>div4</div>"); ???????????????????????????????$("#div2").append($div4) ???????????????????????????}); ???????????????????????}); ???????????// appendTo()和append()用法相反，意思相同 ???????????// prepend()向每个元素内部前置内容 ???????????????????????$(function() { ???????????????????????????$("#add").click(function() { ???????????????????????????????var $div4 = $("<div id=‘div4‘>div4</div>"); ???????????????????????????????$("#div2").prepend($div4) ???????????????????????????}); ???????????????????????}); ???????????//prependTo()prepend()用法相反，意思相同 ???????????// jQuery移除节点 ???????????// remove()删除 删除的是整个元素及元素所含内容 ???????????????????????$(function() { ???????????????????????????$("#delete").click(function() { ???????????????????????????????????????????$("#div3").remove() ???????????????????????????}); ???????????????????????}); ???????????// empty()清空 清空的是元素内所含的内容 ???????????????????????$(function() { ???????????????????????????$("#delete").click(function() { ???????????????????????????????????????????$("#div3").empty() ???????????????????????????}); ???????????????????????}); ???????????????????????????????????????????</script> ???</head> ???<body> ???????<div id="div1">div1</div> ???????<div id="div2">div2</div> ???????<div id="div3">div3</div> ???????<input type="button" name="add" id="add" value="添加节点" /> ???????<input type="button" name="delete" id="delete" value="删除节点" /> ???</body></html>07.31《jQuery》——3.1jQuery实现DOM节点的增删改
原文地址：https://www.cnblogs.com/justlive-tears/p/9399049.html