.insertBefore( target )返回值: jQuery
描述: 在目标元素之前插入匹配元素集中的每个元素。
-
添加版本: 1.0.insertBefore( target )
-
target选择器、元素、元素数组、HTML 字符串或 jQuery 对象;匹配的元素集将插入到此参数指定的元素之前。
-
.before()
和 .insertBefore()
方法执行相同的任务。主要区别在于语法,特别是在内容和目标的放置方面。使用 .before()
,方法之前的选择器表达式是插入内容之前的容器。另一方面,使用 .insertBefore()
,内容位于方法之前,可以是选择器表达式,也可以是动态创建的标记,它将插入到目标容器之前。
考虑以下 HTML
1
2
3
4
5
|
|
我们可以创建内容并将其插入到多个元素之前
1
|
|
每个内部的 <div>
元素都会获得这个新内容
1
2
3
4
5
6
7
|
|
我们也可以选择页面上的一个元素,并将其插入到另一个元素之前
1
|
|
如果以这种方式选择的元素被插入到 DOM 中的另一个位置,它将被移动到目标元素之前(而不是克隆),并且将返回一个包含插入元素的新集合
1
2
3
4
5
|
|
但是,如果有多个目标元素,则将在第一个目标元素之后为每个目标元素创建插入元素的克隆副本,并且将返回该新集合(原始元素加上克隆副本)。
在 jQuery 1.9 之前,追加到单个元素的情况不会创建新集合,而是返回原始集合,这使得在使用未知数量的元素时难以可靠地使用 .end()
方法。
其他说明
-
根据设计,任何接受 HTML 字符串的 jQuery 构造函数或方法(例如 jQuery()、.append()、.after() 等)都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性(例如
<img onload="">
)来实现。不要使用这些方法插入从不受信任的来源(例如 URL 查询参数、cookie 或表单输入)获取的字符串。这样做会导致跨站点脚本 (XSS) 漏洞。在将内容添加到文档之前,请删除或转义任何用户输入。 -
jQuery 不正式支持 SVG。在 SVG 文档上使用 jQuery 方法(除非该方法明确记录支持 SVG),可能会导致意外行为。截至 jQuery 3.0,支持 SVG 的方法示例包括
addClass
和removeClass
。
示例
将所有段落插入到 id 为“foo”的元素之前。与 $( "#foo" ).before( "p" ) 相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
|