jQuery | wrap() 方法

简介

wrap() 是 jQuery 中的一个方法，用于将一个元素的内容包裹在另一个元素中。这个方法可以接受一个 HTML 字符串、DOM 元素或者 jQuery 对象作为参数。

语法

$(selector).wrap(wrappingElement);

参数说明：

• selector：要被包裹的元素选择器；
• wrappingElement：包裹元素的 HTML 字符串、DOM 元素或 jQuery 对象。

示例

HTML 结构

<div class="wrapper">
    <div class="content">这是要被包裹的元素</div>
</div>

JavaScript 代码

$(document).ready(function(){
    $(".content").wrap("<div class='outer'></div>");
});

这段代码会将 class 为 content 的元素包裹在 <div class='outer'></div> 元素内。

包裹多个元素

$(document).ready(function(){
    $("p").wrap("<div class='outer'></div>");
});

这段代码会将所有 <p> 元素包裹在一个 <div class='outer'></div> 元素内。

包裹现有的 HTML 元素

$(document).ready(function(){
    var img = $("<img>")
        .attr("src", "image.png")
        .appendTo(".content");

    $(".content").wrap("<div class='outer'></div>");
});

这段代码会创建一个图片元素，并将它添加到 class 为 content 的元素内，最后将 content 元素包裹在一个 <div class='outer'></div> 元素内。

包裹其他的 jQuery 对象

$(document).ready(function() {
    var newDiv = $("<div>")
        .addClass("inner")
        .text("Inner Div");

    $(".content").wrap(newDiv);
});

这段代码会创建一个 <div class='inner'>Inner Div</div> 元素，并将 class 为 content 的元素包裹在其中。

总结

wrap() 方法可以轻松地将一个或多个元素包裹在其他元素中，这对于动态地添加或删除元素时非常有用。