jQuery prepend()方法

jQuery prepend() 方法用于将指定的内容插入到所选元素的开始位置（作为第一个子元素）。它与 jQuery append() 方法的作用完全相反。

如果您希望将内容插入到所选元素的末尾，请使用 append 方法。

语法： :

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

jQuery prepend() 方法的参数

参数	描述
Content	这是一个必需的参数。它指定要插入的内容。可能的值有： HTML元素、jQuery对象、 DOM元素
Function (index, html)	这是一个可选的参数。它指定返回被插入的内容的函数。

Index: 它用于提供元素在集合中的索引位置。
Html: 它提供所选元素的当前HTML。

jQuery prepend()示例1

让我们通过一个示例来演示jQuery prepend()方法。

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
 $(document).ready(function(){$ ("#btn1").click(function(){  
        $("p").prepend("<b>Prepended text</b>. ");  
    });  
});  
</script>  
</head>  
<body>  
<p>This is the first paragraph.</p>  
<p>This is the second paragraph.</p>  
<button id="btn1">Prepend text</button>  
</body>  
</html>

jQuery prepend() 示例2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("#btn1").click(function(){
         $("p").prepend("<b>Prepended text</b>. "); });$ ("#btn2").click(function(){
        $("ol").prepend("<li>Prepended item</li>");
    });
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<ol>
  <li>Item no.1</li>
  <li>Item no.2</li>
  <li>Item no.3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

jQuery prepend()示例3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: lightpink;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <p>javatpoint.com</p>
<p>Guys! Welcome to the best tutorial site.</p>
 <script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 </body>
</html>