这一小节主要讲了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>