.insertBefore()
返回: jQuery
.insertBefore( target )
描述：把匹配的元素集合中的每个元素插入到目标的前面。
加入于: 1.0
.insertBefore( target )- target一个选择器、元素、元素的数组、HTML字符串，或者jQuery对象；元素的匹配集合将插入到在参数中指定的元素前面。
.before()方法和.insertBefore()方法执行了同样的任务。主要区别是在句法中——具体地说，是内容和目标的位置。利用.before()方法，被插入的内容来自方法的参数：$(target).before(contentToBeInserted)。相较之下，利用.insertBefore()方法，要插入的内容在方法的前面，插入到目标的后面，目标是传递给.insertBefore()方法的参数：$(contentToBeInserted).insertBefore(target)。
设想下面的HTML：
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
我们可以创建内容并一次性插入到若干个元素前面。
$( "<p>Test</p>" ).insertBefore( ".inner" );
每个div.inner得到这些新内容：
<div class="container"> <h2>Greetings</h2> <p>Test</p> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> </div>
我们还可以在网页上选择一个元素，并把它插入到另一个元素前面。
$( "h2" ).insertBefore( $( ".container" ) );
如果以这种方式把一个元素选中并插入到DOM中另一个位置，它会被移到目标前面，而不是被克隆到目标前面，并且返回由插入元素构成的新集合。
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
然而，如果有超过一个目标元素，将创建插入元素的克隆副本，以用于除了第一个目标之外的每个目标，并返回新的集合（原始元素加上克隆元素）。
在jQuery 1.9以前的版本中，这种“追加到单个元素”的情况不会创建一个新集合，而是返回原始的集合，这使它当用在数量未知的元素上时，难以可靠地使用.end()方法。
其它说明
- 根据设计意图，任何接受一段HTML字符串的jQuery构造器或者jQuery方法——包括
jQuery()、.append()、.after()等等——都会潜在地执行代码。这可能发生脚本标签注入，或者使用HTML的元素属性执行代码（例如，<img onload="">。）千万不要用这些方法来插入从不可信任的来源获得的字符串，比如说URL查询参数、cookies，或者表单输入。这样做还可能引入跨站脚本（XSS）漏洞。在往document添加内容之前要删除或转义一切的用户输入。
示例
把所有的段落文本插入到id为“foo”的元素前面。等同于$( "#foo" ).after( "p" )。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>insertBefore demo</title>
<style>
#foo {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="foo">FOO!</div>
<p>I would like to say: </p>
<script>
$( "p" ).insertBefore( "#foo" );
</script>
</body>
</html>
演示结果