极客教程jQuery before
概述
在jQuery中，before()方法用于在给定元素之前插入指定的内容。比如，如果要在一个段落p之前插入一个新的段落p2，那么可以使用before()方法完成。
语法
$(selector).before(content)
- selector: 用于选择要插入内容的元素。
- content: 要插入的内容，可以是HTML字符串、DOM元素、数组、函数等。
示例
1. 在元素之前插入文本
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>This is an existing paragraph.</p>
<script>
(document).ready(function(){("p").before("This is a new paragraph.");
});
</script>
</body>
</html>
运行结果：
This is a new paragraph.
This is an existing paragraph.
解析：上面的示例中，我们在已有的段落<p>之前插入了一个新的段落。before()方法中的参数是一个字符串，表示要插入的文本内容。
2. 在元素之前插入多个元素
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>This is an existing paragraph.</p>
<script>
(document).ready(function(){
var newElements =("<p>This is a new paragraph.</p><p>This is another new paragraph.</p>");
$("p").before(newElements);
});
</script>
</body>
</html>
运行结果：
This is a new paragraph.
This is another new paragraph.
This is an existing paragraph.
解析：在这个示例中，我们通过创建一个新的段落元素，并使用before()方法在已有的段落之前插入了这两个新的段落。注意，newElements是一个包含多个元素的jQuery对象。
3. 在元素之前插入HTML代码片段
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>This is an existing paragraph.</p>
<script>
(document).ready(function(){("p").before("<h2>This is a heading</h2><p>This is a new paragraph.</p>");
});
</script>
</body>
</html>
运行结果：
This is a heading
This is a new paragraph.
This is an existing paragraph.
解析：该示例中，我们使用before()方法在已有的段落之前插入了一个带有标题的HTML片段。
4. 在元素之前插入一个函数返回的内容
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>This is an existing paragraph.</p>
<script>
(document).ready(function(){("p").before(function(){
return "<h2>This is a heading</h2><p>This is a new paragraph.</p>";
});
});
</script>
</body>
</html>
运行结果：
This is a heading
This is a new paragraph.
This is an existing paragraph.
解析：在这个示例中，before()方法的参数是一个返回插入内容的函数。函数可以返回任何类型的内容，包括HTML字符串、DOM元素等。
总结
使用jQuery的before()方法可以方便地在指定元素之前插入内容。无论是插入文本、插入多个元素、插入HTML代码片段还是插入由函数返回的内容，都可以通过before()方法实现。这为我们在网页中动态添加内容提供了很大的便利。