jQuery | prepend（）及其示例-yiteyi-C++库

prepend（）方法是jQuery中的一个内置方法，用于在所选元素的开头插入指定的内容。

null

语法：

$(selector).prepend(content, function)

参数： 该方法接受两个参数，如下所述：

内容： 这是必需的参数，用于指定需要插入的内容。
功能： 它是可选参数，用于指定调用后要执行的函数。

返回值： 此方法返回所选元素，其中包含prepend（）方法所做的指定更改。以下示例说明了jQuery中的prepend（）方法： 例1： 此示例不包含可选参数。

html

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                                                 <                                     head                                     >                       
                                                 <                                     title                                     >The prepend Method</                                     title                                     >                       
                                                 <                                     script                                     src="                       
                                                               https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          ">                       
                                                 </                                     script                                     >                       
                                   
                                                 <!-- jQuery code to show the working of this method -->                       
                                                 <                                     script                                     >                       
                                                 $(document).ready(function(){                       
                                                 $("button").click(function(){                       
                                                 $("p").prepend("Welcome to  ");                       
                                                 });                       
                                                 });                       
                                                 </                                     script                                     >                       
                                                 <                                     style                                     >                       
                                                 div {                       
                                                 width: 350px;                       
                                                 height: 100px;                       
                                                 font-weight: bold;                       
                                                 padding:20px;                       
                                                 font-size: 25px;                       
                                                 border: 2px solid green;                       
                                                 }                       
                                                 </                                     style                                     >                       
                                                 </                                     head                                     >                       
                                                 <                                     body                                     >                       
                                                 <                                     div                                     >                       
                                   
                         <                                     p                                     >GeeksforGeeks!</                                     p                                     >                       
           
                                                 <!-- Click on this button to see the change -->                       
                                                 <                                     button                                     >Click Here!</                                     button                                     >                       
                                                 </                                     div                                     >                       
                                                 </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 单击按钮之前：

图片[1]-jQuery | prepend（）及其示例-yiteyi-C++库

点击按钮后：

图片[2]-jQuery | prepend（）及其示例-yiteyi-C++库

例2： 此示例包含可选参数。

html

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                                                 <                                     head                                     >                       
                                                 <                                     title                                     >The prepend Method</                                     title                                     >                       
                                                 <                                     script                                     src                                     =                       
                                                 "                           https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                          "                                     >                       
                                                 </                                     script                                     >                       
                                   
                                                 <!-- jQuery code to show the working of this method -->                       
                                                 <                                     script                                     >                       
                                                 $(document).ready(function() {                       
                                                 $("button").click(function() {                       
                                                 $("p").prepend(function() {                       
                                                 return "<                                     b                                     >Hello  ";                       
                                   
                                                 });                       
                                                 });                       
                                                 });                       
                                                 </                                     script                                     >                       
                                                 <                                     style                                     >                       
                                                 div {                       
                                                 width: 350px;                       
                                                 height: 100px;                       
                                                 font-weight: bold;                       
                                                 padding:20px;                       
                                                 font-size: 25px;                       
                                                 border: 2px solid green;                       
                                                 }                       
                                                 </                                     style                                     >                       
                                                 </                                     head                                     >                       
                                                 <                                     body                                     >                       
                                                 <                                     div                                     >                       
                                   
                         <                                     p                                     >Contributor!</                                     p                                     >                       
           
                                   
                                                 <!-- Click on this button to see the change -->                       
                                                 <                                     button                                     >Click Here!</                                     button                                     >                       
                                                 </                                     div                                     >                       
                                                 </                                     body                                     >                       
                         </                                     html                                     >                       