上一节:
下一节:

  jQuery 添加元素

  • jQuery 添加元素

    使用jQuery，可以轻松添加新元素/内容。
    添加新的HTML内容
    我们将看看用于添加新内容的四种jQuery方法：
    • append() 在所选元素的末尾插入内容
    • prepend() 在所选元素的开头插入内容
    • after() 在所选元素后插入内容
    • before() 在所选元素之前插入内容

  • jQuery append()方法

    jQuery append()方法在所选HTML元素的END处插入内容。 
       
     <head>
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         $("p").append("追加文本.");
         </script>
     </head>
    尝试一下

  • jQuery prepend()方法

    jQuery prepend()方法插入所选HTML元素的开始内容。 
       
     <head>
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         $("p").prepend("在开头追加文本");
         </script>
     </head>
    尝试一下

  • 使用append()和prepend()添加几个新元素

    在上面的两个示例中，我们只在所选HTML元素的开头/结尾插入了一些文本/ HTML。
    但是，append()和prepend()方法都可以将无限数量的新元素作为参数。 可以使用text/HTML（就像我们在上面的示例中所做的那样），使用jQuery，或使用JavaScript代码和DOM元素生成新元素。
    在以下示例中，我们创建了几个新元素。 元素使用text/HTML，jQuery和JavaScript/DOM创建。 然后我们使用append()方法将新元素追加到文本中（这也适用于prepend()）： 
       
     <head>
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         function appendText() {
           var txt1 = " <p>文本1</p>";               // 使用HTML创建元素  
           var txt2 = $(" <p> </p>").text("文本2");   // 使用jQuery创建
           var txt3 = document.createElement("p");  // 使用DOM创建
           txt3.innerHTML = "文本3";
           $("body").append(txt1, txt2, txt3);      // 附加新元素 
         }
         </script>
     </head>
    尝试一下

  • jQuery after()和before()方法

    jQuery after()方法在选定的HTML元素之后插入内容。
    jQuery before()方法在选定的HTML元素之前插入内容。 
       
     <head>
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
          $("img").after("一些文本后");
          $("img").before("一些文本前");
         </script>
     </head>
    尝试一下

  • 使用after()和before()添加几个新元素

    此外，after()和before()方法都可以将无限数量的新元素作为参数。 可以使用text/HTML（就像我们在上面的示例中所做的那样），使用jQuery，或使用JavaScript代码和DOM元素生成新元素。
    在以下示例中，我们创建了几个新元素。 元素使用text/HTML，jQuery和JavaScript/DOM创建。 然后我们使用after（）方法将新元素插入到文本中（这也适用于before()）： 
       
     <head>
         <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
         function afterText() {
           var txt1 = "<b>我</b>";                    // 使用HTML创建元素   
           var txt2 = $("<i></i>").text("爱 ");     // 使用jQuery创建
           var txt3 = document.createElement("b");    //使用DOM创建
           txt3.innerHTML = "jQuery!";
           $("img").after(txt1, txt2, txt3);          // 之后插入新元素img
         }
         </script>
     </head>
    尝试一下
    有关所有jQuery HTML方法的完整概述，请转到我们的jQuery HTML/CSS手册
上一节:
下一节: