jQuery append()

使用jQuery append()方法将指定的内容作为jQuery集合中所选元素的最后一个子项(在其末尾)插入。

append()和appendTo()方法用于执行相同的任务。它们之间的唯一区别是语法。

语法:

 $(selector).append(content, function(index, html))

jQuery append()方法的参数

参数	说明
content	这是必填参数。它指定要插入的内容。其可能的值为: HTML元素 jQuery对象 DOM元素
function(index, html)	这是一个可选参数。它指定返回要插入内容的函数。索引:它返回元素在集合中的索引位置。 HTML::它返回所选元素的当前HTML。

jQuery append()方法的示例

让我们以一个示例来演示jQuery append()方法。

 <!DOCTYPE html>
 <html>
 <head>
 <script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
     $("#btn1").click(function(){
         $("p").append(" <b>Newly added appended text</b>.");
     });
     $("#btn2").click(function(){
         $("ol").append("<li><b>Newly added appended item</b></li>");
     });
 });
 </script>
 </head>
 <body>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 <ol>
   <li>Item no.1</li>
   <li>Item no.2</li>
   <li>Item no.3</li>
 </ol>
 <button id="btn1">Append text</button>
 <button id="btn2">Append item</button>
 </body>
 </html>

输出:

This is a paragraph.

This is another paragraph.

Item no.1
Item no.2
Item no.3

jQuery appendTo()

jQuery insertAfter()