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手册