jQuery append() 方法用于在所选元素的结尾，以子元素的角色插入指定内容。

而jQuery prepend() 方法是在所选元素的开头，以子元素的角色插入指定内容。

语法

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

方法参数

参数说明
content为必填参数。它指定要插入的内容。它的可能值是:HTML 元素、jQuery 对象或者 DOM元素
function (index, html)

是可选参数。它指定了一个返回插入内容的函数。

  • index:用于提供集合中元素的索引位置。
  • html: : 提供被选元素的当前 HTML。

例子

介绍一些例子了解jQuery append() 方法的使用

例1

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn1").click(function(){  
        $("p").append("<b>元素内容</b>. ");  
    });  
});  
</script>  
</head>  
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<button id="btn1">结尾插入子元素</button>
</body>  
</html>
输出效果：

jQuery append() 方法

例2

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append("<b>插入内容</b>. ");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>前置列表项</li>");
    });
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<ol>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ol>
<button id="btn1">p标签</button>
<button id="btn2">列表项</button>
</body>
</html>

jQuery append() 方法