jQuery wrap() 方法 用于给选定的元素周围外部包裹一个其它的元素。

语法

$(selector).wrap(wrappingElement,function(index))

方法参数

参数说明
wrappingElement为必填参数。它指定要环绕包裹的 HTML 元素。它的可能值是:HTML 元素jQuery 对象或者DOM元素
function(index)是可选参数。它指定包裹元素的回调函数。index:提供元素在集合中的索引位置。

例子

例1

给p元素包裹一个div元素。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap("<div></div>");
    });
});
</script>
<style>
div{background-color: pink;}
</style>
</head>
<body>
<p>jQuery wrap() 方法例子</p>
<p>yxjc123.com </p>
<button>点击给p元素包裹一个div元素</button>
</body>
</html>

例2

包裹一个html元素。

<!DOCTYPE html>
<html>
<head>
<title>jQuery wrap() 方法示例</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = '<div class="div"></div>';
               $("#destination").wrap( content );
            });
         });
</script>
<style>
.div{ margin:5px;padding:2px; border:2px solid #666; width:80px;}</style>
</head>
<body>
<p>点击1,2,3查看效果:</p>
<div class="div" id="destination">被包裹的文本内容</div>
<div class="div" style="background-color:orange;">1</div>
<div class="div" style="background-color:yellow;">2</div>
<div class="div" style="background-color:green;">3</div>
</body>

</html>