jQuery | before() 方法(1)

📌 相关文章

📜 jQuery | before() 方法(1)

📅 最后修改于: 2023-12-03 15:16:47.022000 🧑 作者: Mango

jQuery | before() 方法

before() 方法是 jQuery 中经常使用的方法之一。它用于在选定的元素之前插入任意元素或内容。在这篇文章中，我们将学习 before() 方法的语法、参数和示例用法。

语法

$(selector).before(content,function(index,html))

before() 方法具有两个参数：content 和 function(index,html)。

content：要插入的新元素、文本或 HTML。
function(index,html)：可选参数。使用函数来返回要插入的内容。

参数

| 参数 | 类型 | 描述 | | ------- | -------- | ------------------------------------------------------------ | | content | string | 必需。规定插入到指定元素之前的内容。 | | function | function | 可选。规定生成每个插入元素的函数。函数返回一个值，该值将插入到指定元素的前面。|

示例用法

在元素之前插入内容

以下示例演示了如何在一个段落中添加一条消息。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery | before() 方法</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<p>这是一个段落。</p>
	<script>
		$(document).ready(function(){
			$("p").before("<div>这是一个新的 div 元素。</div>");
		});
	</script>
</body>
</html>

这将在段落前插入一个新元素。输出如下：

<div>这是一个新的 div 元素。</div>
<p>这是一个段落。</p>

使用函数插入元素

以下示例演示如何使用函数来插入元素。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery | before() 方法</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</div>

	<script>
		$(document).ready(function(){
			function textBefore(){
				return "<div class='text'>Hello World！</div>";
			}
			$(".second").before(textBefore);
		});
	</script>
</body>
</html>

这将在第二个 div 之前插入一个新的 div 元素。输出如下：

<div class="container">
	<div class="first"></div>
	<div class="text">Hello World！</div>
	<div class="second"></div>
	<div class="third"></div>
</div>

总结

在本文中，我们学习了 before() 方法的语法、参数和示例用法。这是将任意元素或元素内容插入到选定元素之前的一种简单方法。它可以很方便地在页面中插入新元素，或者在元素之前插入特定的 HTML 内容。