jQuery prepend()
jQuery prepend()
jQuery prepend()方法用于在选定元素的开头(作为第一个子元素)插入指定的内容。只是与jQuery append()方法相反。
如果要在选定元素的末尾插入内容，则应使用append方法。
< strong>语法:
$(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="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>添加文字</b>. ");
});
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<button id="btn1">添加文字</button>
</body>
</html>
输出:
这是第一段。
这是第二段。
jQuery prepend()示例2
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>添加文字</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>添加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<ol>
<li>编号1</li>
<li>编号2</li>
<li>编号3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</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="/jquery-1.10.2.js"></script>
</head>
<body>
<p>bianchenghao6.com</p>
<p>伙伴们!欢迎来到最好的教程网站。</p>
<script>
$("p").prepend( "<b>Hello </b>");
</script>
</body>
</html>
输出:
Hello bianchenghao6.com
Hello 伙伴们!欢迎来到最好的教程网站。
注意:此处，"Hello"是前置文字。