day56
参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-5
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文档操作示例</title> </head> <body> <ul id="u1"> <li id="l1">1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-3.2.1.min.js"></script> </body> </html>
实践：
添加到内部的前后两端。
另一种方式append、appendTo：
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
02点击在表格最后添加一条记录.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>点击在表格最后添加一条记录</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <!--表格的整体--> <tbody> <tr> <td>1</td> <td>小强</td> <td>吃冰激凌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>二哥</td> <td>Girl</td> <td> <button class="delete">删除</button> </td> </tr> </tbody> </table> <button id="b1">添加一行数据</button> <script src="jquery-3.2.1.min.js"></script> <script> // 绑定事件 $("#b1").click(function () { // 生成要添加的tr标签及数据 var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" + "<td>小东北</td>" + "<td>社会摇</td>" + "<td><button class='delete'>删除</button></td>"); // 把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle);//添加 找到tbody标签添加 }); // 每一行的=删除按钮绑定事件 $(".delete").click(function () { //this表示删除这一个键 $(this).parent().parent().remove(); //删除，父标签的父标签，整行删除 }); </script> </body> </html>
效果：
替换
replaceWith()
replaceAll()
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>替换操作示例</title> </head> <body> <!--跳转--> <p><a href="http://www.sogo.com">aaa</a></p> <p><a href="">bbb</a></p> <p><a href="">ccc</a></p> <button id="b1">点我!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { // 创建一个img标签 var imgEle = document.createElement("img");//生成src标签 $(imgEle).attr("src", "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2927529377,3058292508&fm=27&gp=0.jpg"); $("a").replaceWith(imgEle);//将a标签中全部替换为img标签 // $(imgEle).replaceAll("a"); }); </script> </body> </html>
实践：
克隆
clone()// 参数
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>克隆示例</title> </head> <body> <button id="b1">屠龙宝刀,点我就送!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { $(this).clone(true).insertAfter(this);//克隆一份添加,关注clone()和clone(true)的区别 }); </script> </body> </html>
实践：
以上每个id都一样。