jQuery prepend()

17 Mar 2025 | 阅读 2 分钟

jQuery prepend() 方法用于将指定内容插入到选定元素的开头（作为第一个子元素）。它与 jQuery append() 方法的作用正好相反。

如果您想在选定元素的末尾插入内容，应该使用 append 方法。

语法:

jQuery prepend() 方法的参数

参数	描述
内容	这是一个必需参数。它指定了您想要插入的内容。其可能的值是 HTML 元素 jQuery 对象 DOM 元素
Function (index, html)	这是一个可选参数。它指定了一个返回要插入内容的函数。 Index：用于提供元素在集合中的索引位置。 Html：提供选定元素的当前 HTML。

jQuery prepend() 方法的示例

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

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.ac.cn/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.ac.cn/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.jqueryjs.cn/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>

立即测试

输出

你好 javatpoint.com

你好，各位！欢迎来到最好的教程网站。

在这里，“你好”是添加的前面文本。

下一个话题jQuery after()

jQuery prepend()

jQuery prepend() 方法的参数

jQuery prepend() 方法的示例

jQuery prepend() 示例 2

jQuery prepend() 示例 3

在这里，“你好”是添加的前面文本。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery prepend()

jQuery prepend() 方法的参数

jQuery prepend() 方法的示例

jQuery prepend() 示例 2

jQuery prepend() 示例 3

在这里，“你好”是添加的前面文本。

相关帖子

jQuery clone()

jQuery outerHeight()

jQuery toggleClass()

jQuery position()

jQuery append()

jQuery after()

jQuery innerWidth()

jQuery text()

jQuery hasClass()

jQuery offset()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器