一、添加节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>51-jQuery添加节点相关方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 内部插入 append(content|fn) appendTo(content) 会将元素添加到指定元素内部的最后 prepend(content|fn) prependTo(content) 会将元素添加到指定元素内部的最前面 外部插入 after(content|fn) 会将元素添加到指定元素外部的后面 before(content|fn) 会将元素添加到指定元素外部的前面 insertAfter(content) insertBefore(content) */ $("button").click(function () { // 1.创建一个节点 var $li = $("<li>新增的li</li>"); // 2.添加节点 $("ul").append($li); $("ul").prepend($li); // $li.appendTo("ul"); // $li.prependTo("ul"); // $("ul").after($li); // $("ul").before($li); // $li.insertAfter("ul"); }); }); </script> </head> <body> <button>添加节点</button> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> <div>我是div</div> </body> </html>
二、删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>52-jQuery删除节点相关方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 删除 remove([expr]) 删除指定元素 empty() 删除指定元素的内容和子元素, 指定元素自身不会被删除 detach([expr]) */ $("button").click(function () { // $("div").remove(); // $("div").empty(); // $("li").remove(".item"); // 利用remove删除之后再重新添加,原有的事件无法响应 // var $div = $("div").remove(); // 利用detach删除之后再重新添加,原有事件可以响应 var $div = $("div").detach(); // console.log($div); $("body").append($div); }); $("div").click(function () { alert("div被点击了"); }); }); </script> </head> <body> <button>删除节点</button> <ul> <li class="item">我是第1个li</li> <li>我是第2个li</li> <li class="item">我是第3个li</li> <li>我是第4个li</li> <li class="item">我是第5个li</li> </ul> <div>我是div <p>我是段落</p> </div> </body> </html>
三、替换节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53-jQuery替换节点相关方法</title> <script src="../jQuery基础/js/jquery-1.12.4.js"></script> <script> $(function () { /* 替换 replaceWith(content|fn) replaceAll(selector) 替换所有匹配的元素为指定的元素 */ $("button").click(function () { // 1.新建一个元素 var $h6 = $("<h6>我是标题6</h6>"); // 2.替换元素 // $("h1").replaceWith($h6); $h6.replaceAll("h1"); }); }); </script> </head> <body> <button>替换节点</button> <h1>我是标题1</h1> <h1>我是标题1</h1> <p>我是段落</p> </body> </html>
四、复制节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>54-jQuery复制节点相关方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // clone([Even[,deepEven]]) /* 如果传入false就是浅复制, 如果传入true就是深复制 浅复制只会复制元素, 不会复制元素的事件 深复制会复制元素, 而且还会复制元素的事件 */ $("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false); // 2.将复制的元素添加到ul中 $("ul").append($li); }); $("button").eq(1).click(function () { // 1.深复制一个元素 var $li = $("li:first").clone(true); // 2.将复制的元素添加到ul中 $("ul").append($li); }); $("li").click(function () { alert($(this).html()); }); }); </script> </head> <body> <button>浅复制节点</button> <button>深复制节点</button> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul> </body> </html>