srcmini本文概述
jQuery prepend()方法用于将指定的内容插入到所选元素的开头（作为第一个子元素）。它与jQuery append()方法相反。
如果要在所选元素的末尾插入内容, 则应使用append方法。
句法：
$(selector).prepend(content, function(index, html))jQuery prepend()方法的参数
| 参数 | 描述 |
|---|---|
| Content | 它是必填参数。它指定要插入的内容。其可能的值为：HTML元素jQuery对象DOM元素 |
| Function (index, html) | 它是一个可选参数。它指定一个函数, 该函数返回插入的内容。索引：用于提供元素在集合中的索引位置。 Html：：它提供所选元素的当前HTML。 |
jQuery prepend()方法的示例
让我们以一个示例来演示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>立即测试
输出：
这是第一段。
这是第二段。
- 物品1
- 项目2
- 项目3
前置文字
前置清单项目
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>srcmini02.com</p>
<p>Guys! Welcome to the best tutorial site.</p>
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
</body>
</html>立即测试
输出：
你好srcmini02.com
大家好！欢迎来到最好的教程网站。
评论前必须登录！
注册