jq dom 操作
阿新 • • 發佈:2020-08-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>操作節點</title> </head> <body> <p title="選擇你最喜歡的體育活動">你最喜歡的體育運動是?</p> <ul> <li title="踢足球">踢足球</li> <li title="打籃球">打籃球</li> <li title="乒乓球">乒乓球</li> </ul> <script src="../jquery.js"></script> <script> $(function () { $("ul").append("<li>123</li>"); // 向元素的內部的末尾插入節點$("ul").prepend("<li>123</li>"); // 向元素的內部的開頭插入節點 $("li:eq(2)").before("<li>頡旺飛</li>"); // 前面插入節點 $("li:eq(3)").after("<li>王佳慧</li>"); // 後面插入節點 $("<li>無敵</li>").insertBefore("li:eq(0)").css("color", "red"); // 指定的子節點之前插入一個節點 $("<li>無敵</li>").insertAfter("li:eq(7)").css("color", "red"); // 指定的子節點之後插入一個節點 }); </script> </body> </html>