jQuery insertBefore( ) 方法
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery insertBefore( ) 方法相关的知识，希望对你有一定的参考价值。
通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 html 元素。
语法格式：
$(content).insertBefore(selector)参数：
content：插入的内容（必须包含HTML标签）
selector：被选元素
注意：如果 content 是已存在的元素，它将被从原来的位置移除，并被插入在被选元素之前。
示例：
（1）插入新元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("<p>盒子的宽度为" + $("div").css("width") + "盒子的高度为" + $("div").css("height") + "</p>").insertBefore($("div"));
})
})
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: rgba(12, 204, 115, 0.575);
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
</body>
</html>
击按钮，在盒子前面插入一个显示盒子的宽和高的p元素，如图：
（2）插入原先存在的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").insertBefore($("div"));
})
})
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: rgba(12, 204, 115, 0.575);
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
<p>我是一个段落。</p>
</body>
</html>
点击按钮，段落将被从原来的位置移除，并插入到盒子之前，如图：
以上是关于jQuery insertBefore( ) 方法的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 文档操作 - insertAfter() ，insertBefore() 方法
jQuery学习—before方法after方法insertBefore方法insertAfter方法
jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法
jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别