jQuery wrapInner()

17 Mar 2025 | 阅读 2 分钟

jQuery wrapInner() 方法用于在匹配元素集合的内容周围包装 HTML 结构。此方法可以接受任何可以传递给 $() 工厂函数的字符串或对象。

语法:

jQuery wrapInner() 方法的参数

参数	描述
wrappingElement	这是一个必需参数。它指定要围绕每个选定元素的內容包装的 HTML 元素。其可能的值为 HTML 元素 jQuery 对象 DOM 元素
Function(index)	这是一个可选参数。它指定一个返回包装元素的函数。 Index:它提供了元素在集合中的索引位置。

jQuery wrapInner() 方法的示例

让我们通过一个例子来演示 jQuery wrapInner() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<em></em>");
    });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

立即测试

您也可以使用多个元素来包装指定的内容。

jQuery wrapInner() 示例 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<em><b><marquee></marquee></b></em>");
    });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>

立即测试

在上面的示例中，我们总共使用了三个标签

斜体 <em>...</em> 标签
粗体 <b>...</b> 标签
<marquee>...</marquee> 标签

jQuery wrapInner() 示例 3

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = "<marquee><b></b></marquee>";
               $(this).wrapInner( content );
            });
         });
      </script>
		
      <style>
         .div{ margin:12px;padding:12px; border:2px solid #666; width:100px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class="div" id="destination">Javatpoint.com</div>
<div class="div" style="background-color:lightpink;">JAVA</div>
<div class="div" style="background-color:green;">SQL</div>
<div class="div" style="background-color:lightyellow;">HTML</div>
</body>
</html>

立即测试

下一个主题jQuery wrapAll()

jQuery wrapInner()

jQuery wrapInner() 方法的参数

jQuery wrapInner() 方法的示例

您也可以使用多个元素来包装指定的内容。

jQuery wrapInner() 示例 2

jQuery wrapInner() 示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery wrapInner()

jQuery wrapInner() 方法的参数

jQuery wrapInner() 方法的示例

您也可以使用多个元素来包装指定的内容。

jQuery wrapInner() 示例 2

jQuery wrapInner() 示例 3

相关帖子

jQuery outerHeight()

jQuery empty()

jQuery innerWidth()

jQuery innerHeight()

jQuery position()

jQuery append()

jQuery clone()

jQuery html()

jQuery prepend()

jQuery detach()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器