📌  相关文章
📜  jQuery | prepend() 与示例(1)

📅  最后修改于: 2023-12-03 14:43:15.618000             🧑  作者: Mango

jQuery | prepend() 与示例

在jQuery中，prepend() 方法用于在选定元素的开头（内部）插入指定的内容。

语法
$(selector).prepend(content,function(index,html))
参数

  • content：必需。预添加的内容。可以是文本、HTML标签、jQuery对象等。

  • function(index,html)：可选。规定作为回调函数的函数名。该函数在每个匹配的元素上执行，并接收两个参数：

    • index：可选。元素在集合中的索引位置。
    • html：可选。元素的内容。
返回值

prepend() 方法不会返回任何值。

示例
<!DOCTYPE html>
<html>
<head>
	<title>jQuery | prepend() 与示例</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="test">
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
	</div>
	<script>
		$(document).ready(function(){
			$("#test").prepend("<h2>Hello world!</h2>");
			$("#test p").prepend(function(index,html){
  				return "<b>" + html + "</b>";
			});
		});
	</script>
</body>
</html>

该示例中，我们首先将一个 h2 标题添加到 id 为 test 的 div 元素的开头。

然后，我们针对该 div 元素中的所有 p 元素（本例中有两个），在其开头添加一个加粗标签 。

最终输出的内容为：

Hello world!
<b>This is a paragraph.</b>
<b>This is another paragraph.</b>

代码片段如下所示：

```html
<!DOCTYPE html>
<html>
<head>
	<title>jQuery | prepend() 与示例</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="test">
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
	</div>
	<script>
		$(document).ready(function(){
			$("#test").prepend("<h2>Hello world!</h2>");
			$("#test p").prepend(function(index,html){
  				return "<b>" + html + "</b>";
			});
		});
	</script>
</body>
</html>