jQuery prepend() jQueryprepend()|jQuery

本文概述

jQuery prepend()方法的参数
jQuery prepend()方法的示例
jQuery prepend()示例2
jQuery prepend()示例3

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="http://img.readke.com/220429/21194C361-2.jpg"> < /script> < /head> < body> < p> srcmini.com< /p> < p> Guys! Welcome to the best tutorial site.< /p> < script> $( "p" ).prepend( "< b> Hello < /b> " ); < /script> < /body> < /html>

立即测试
输出：
你好srcmini.com
【jQuery prepend()】大家好！欢迎来到最好的教程网站。
在此, “ Hello”是前置文本。