jQuery的文件處理操作
阿新 • • 發佈：2018-12-11
文件處理常用的函式：
append, appendTo 向每個匹配的元素內部追加內容
prepend, prependTo 向每個匹配的元素內部前置內容。
before, after, insertBefore, insertAfter 在每個匹配的元素之後或者前面插入內容。
wrap, unwrap 把所有匹配的元素用其他元素的結構化標記包裹起來。unwrap 表示移除直接父級元素
replaceWith 將所有匹配的元素替換成指定的HTML或DOM元素。
empty, remove, clone 刪除匹配的元素集合中所有的子節點。
<!DOCTYPE html> <html lang="en"> <head> <script src="jquery-1.11.1.min.js"></script> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>I would like to say: </p> <div>this is div1</div> <div>this is div2</div> <p class="test_p">I would like to say: test_p</p> <div id="foo">Hello foo after</div> <div id="foo2">Hello foo before</div> <div class="test_wrap" style="color: red"> <p class="test_p2">I would like to say: test_p2</p> </div> <p class="test_empty">Hello,<span>Person</span> <a href="#">and person</a></p> <p class="test_remove">Hello,</p> how are <p>you?</p> <b class="test_clone">Hello,</b> <p>how are you?</p> <p class="test_replace">Hello</p> <p class="test_replace">cruel</p> <p class="test_replace">World</p> </body> </html> <script> $(function () { //append //$("p").append("<b>Hello</b>"); //appendTo 剪下操作 // $("p").appendTo("div"); //prepend 向每個匹配的元素內部前置內容 //$("p").prepend("<b>Hello</b>"); //after 在每個匹配的元素之後插入內容。 //$("p").after("<b>Hello</b>"); // before 在每個匹配的元素之前插入內容。 // $("p").before("<b>Hello</b>"); // 剪下操作 //insertAfter 把所有匹配的元素插入到另一個、指定的元素元素集合的後面 和$("#foo").after("p")相同 // $("p.test_p").insertAfter("#foo"); //$("#foo").after($("p.test_p")); //insertBefore 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。 和 與 $("#foo").before("p")相同。 // $("p.test_p2").insertBefore("#foo2"); // $("#foo2").before($("p.test_p2")); //wrap。把所有匹配的元素用其他元素的結構化標記包裹起來 // $("p.test_p2").wrap("<div class='wrap' style='color: red;'></div>"); //unwrap 取消包裹, 移除直接父級元素 // $("p.test_p2").unwrap(); //empty 刪除匹配的元素集合中所有的子節點。 // $("p.test_empty").empty(); //remove 從DOM中刪除所有匹配的元素。 // $("p.test_remove").remove(); //clone 克隆所有b元素（並選中這些克隆的副本），然後將它們前置到所有段落中。 // $("b").clone().prependTo("p"); //replaceWith 將所有匹配的元素替換成指定的HTML或DOM元素。 //$("p.test_replace").replaceWith("<b>Paragraph. </b>"); }); </script>