在动态操作页面结构时，往某个元素前面插入新内容是再常见不过的需求。jQuery提供了两个看起来功能相似的方法来做这件事——before() 和 insertBefore()。很多教程对它们一笔带过，但实际上理解两者的区别，能让你在写链式调用时思路清晰不少。
核心功能与语法
insertBefore() 的作用很直接：把指定的内容插入到目标元素的前面。如果插入的内容是页面上已经存在的元素，它会从原来的位置被移动过来，而不是复制一份。
$(content).insertBefore(target)
两个参数都是必填的：
-
content：要插入的内容。可以是HTML字符串、DOM元素、或者jQuery对象。
-
target：目标元素，即内容要插入到谁的前面。同样是选择器、DOM元素或jQuery对象。
before() 和 insertBefore() 的核心区别
这两个方法经常被放在一起比较。它们的执行结果几乎一样，但写法和主体视角不同。
before() 的写法是：目标元素在前，内容作为参数。
$("p").before("<span>新内容</span>")
读作："在所有 <p> 前面插入 <span>"。
insertBefore() 的写法是：内容在前，目标作为参数。
$("<span>新内容</span>").insertBefore("p")
读作："把 <span> 放到所有 <p> 前面去"。
从链式调用的角度看，这两种写法决定了后续方法操作的是谁。在 before() 里，链式调用继续作用于目标元素（也就是 $("p")）。在 insertBefore() 里，链式调用作用于内容本身（也就是新创建的 <span>）。这是我在选择用哪个方法时的核心判断依据——看链式操作的主体需要是谁。
实战示例一：创建新元素并插入到段落前面
这个例子演示在页面上动态插入一段提示文字，并直接对入的内容设置样式。因为后续操作的是插入的内容本身，这里选择 insertBefore() 更合适。
<html>
<head>
<meta charset="UTF-8">
<title>jQuery insertBefore() 新建内容插入</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#insertBtn").click(function(){
// 创建span元素，插入到所有p标签前面，并链式调用css设置插入内容的样式
$("<span><b>
