jQuery文件增刪
阿新 • • 發佈：2021-11-21
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>17_文件_增刪改</title> </head> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 { position: absolute; width: 100px; height: 100px; /*top: 50px;*/ background: red; } .div3 { position: absolute; top: 250px; } </style> <body> <ul id="ul1"> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">EEEEE</li> <li>FFFFF</li> </ul> <br> <br> <ul id="ul2"> <li>aaa</li> <li title="hello">bbb</li> <li class="box">ccc</li><li title="hello">ddd</li> <li title="two">eee</li> </ul> <!-- 1. 新增/替換元素 * append(content) 向當前匹配的所有元素內部的最後插入指定內容 * prepend(content) 向當前匹配的所有元素內部的最前面插入指定內容 * before(content) 將指定內容插入到當前所有匹配元素的前面 * after(content) 將指定內容插入到當前所有匹配元素的後面替換節點 * replaceWith(content) 用指定內容替換所有匹配的標籤刪除節點 2. 刪除元素 * empty() 刪除所有匹配元素的子元素 * remove() 刪除所有匹配的元素 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 向id為ul1的ul下新增一個span(最後) 2. 向id為ul1的ul下新增一個span(最前) 3. 在id為ul1的ul下的li(title為hello)的前面新增span 4. 在id為ul1的ul下的li(title為hello)的後面新增span 5. 將在id為ul2的ul下的li(title為hello)全部替換為p 6. 移除id為ul2的ul下的所有li */ //1. 向id為ul1的ul下新增一個span(最後) var $ul1 = $('#ul1') // $ul1.append('<span>append()新增的span</span>') $('<span>appendTo()新增的span</span>').appendTo($ul1) //2. 向id為ul1的ul下新增一個span(最前) // $ul1.prepend('<span>prepend()新增的span</span>') $('<span>prependTo()新增的span</span>').prependTo($ul1) //3. 在id為ul1的ul下的li(title為hello)的前面新增span $ul1.children('li[title=hello]').before('<span>before()新增的span</span>') //4. 在id為ul1的ul下的li(title為hello)的後面新增span $ul1.children('li[title=hello]').after('<span>after()新增的span</span>') //5. 將在id為ul2的ul下的li(title為hello)全部替換為p $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替換的p</p>') //6. 移除id為ul2的ul下的所有li // $('#ul2').empty() // <p>也會刪除 $('#ul2>li').remove() </script> </body> </html>