jQuery 之修改文件結構-(DOM操作)
阿新 • • 發佈：2018-12-15
插入和替換元素
第一組: (contend).method(target); appendTo() prependTo() insertAfter() insertBefore() replaceAll(); 注意: 將文件中已存在的元素, 會從當前位置移走它
複製元素 : clone();
包裝元素: wrap() ,
刪除元素: empty() , remove(), unwrap() , detach()
上程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is a test</title> <style type="text/css"> *{ margin: 0;padding: 0; } </style> <script type="text/javascript" src="jquery-1.4.2.js"></script> </head> <body> <div id="log"> <strong> Login </strong> </div> <a href="#" onclick="alert()">link</a> <div id="test"> <p class="one">this is a test</p> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>F</p> <p>G</p> </div> <p>hello</p> <div id="spanCol"> <span>1</span> <br> <span>2</span> <br> <span>3</span> <br> <span>4</span> <br> <span>5</span> <br> </div> </body> </html> <script> // 插入和替換元素 var textNode= document.getElementsByTagName("div")[0].firstChild; //獲取第一個div的第一個文字節點 $("p").append(textNode); //將textNode移動到所有的<p>元素後面, 成為她們的lastChild $("p").prepend("<strong>first: </strong>"); // 將<strong>first:</strong> 插入到p元素的起始處成為firstChild $("#log").replaceWith("<h1 align='center'>welcome to CSDN </h1>"); $(document.createElement("hr")).appendTo("h1"); // 在<h1>們插入<br> , 是<br>是<h1>的lastChild(); //注意 appendTo(), to- 讀法, 把xxx 插入到xxx裡; // append(), 讀法 ， xxx 追加 xxx子節點 //複製元素 (clone()) //clone()建立並返回所有選中元素(包含所有後代節點)的一個副本, 返回的jQuery物件的元素不是文件的一部分 //所以沒有刪除效果 , 當clone() 的引數為true時即 $(xxx).clone(true) 時 會複製事件處理程式和元素相關聯的資料(data()) $("#test .one").clone().appendTo("#test"); // 注意與無clone()的差異即替換為 $("#test .one").appenTo("#test"); //包裝元素 wrap圍巾 , xxx的圍巾是xxx; // wrap() . wrapInner() . wrapAll(); // 將<h1>大佬們用div包起來；<div style="color:yellow"><h1>xxxxxxx</h1></div> $("h1").wrap("<div style='color: yellow' ></div>"); // 將 <h1></h1> 的內容用 <strong></strong> 包起來 $("h1").wrapInner("<strong></strong>"); //so easy to happy //刪除元素 // empty() , 刪除刪除元素內容為空 // $("body").empty(); // 空頁面 // remove(): // 從文件刪除選中的元素 , 通常不帶引數呼叫remove()方法, 如果插入一個引數，會當做selector, 從$類陣列選擇刪除 // $("body").remove() ; // body標籤都沒有了 , 更別說元素的content內容 //$("div").remove("#spanCol") ; //把 <div id="spanCol"><div>刪除; // unwarp()方法是 wrapAll()和wrap() 方法的反操作; // detach() // 不逼逼,逼逼也不懂 // d*##$. // zP"""""$e. $" $o //4$ '$ $" $ //'$ '$ J$ $F // 'b $k $> $ // $k $r J$ d$ // '$ $ $" $~ // '$ "$ '$E $ // $ $L $" $F ... // $. 4B $ $$$*"""*b // '$ $. $$ $$ $F // "$ R$ $F $" $ // $k ?$ u* dF .$ // ^$. $$" z$ u$$$$e // #$b[email protected]$" ?$ // #$ .o$$# d$$$$c ?F // $ .d$$#" . zo$> #$r .uF // $L .u$*" $&$$$k .$$d$$F // $$" ""^"$$$P"$P9$ // JP .o$$$$u:$P $$ // $ ..ue$" "" $" // d$ $F $ // $$ ....udE 4B // #$ """"` $r @$ // ^$L '$ $F // RN 4N $ // *$b d$ // $$k $F // $$b $F // $"" $F // '$ $ // $L $ // '$ $ // $ $ </script>