1. 程式人生 > 實用技巧 >jq dom 操作

jq dom 操作

<!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>