Home > Article > Web Front-end > Usage examples of wrapInner() method in jQuery

Usage examples of wrapInner() method in jQuery

巴扎黑Original: 2017-06-24 14:13:211065browse

This article mainly introduces the usage of wrapInner() method in jQuery. It analyzes the function and definition of wrapInner() method and the usage skills of wrapping matching elements with examples. Friends who need it can refer to it

The example in this article describes the usage of wrapInner() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method uses the specified HTML content or element to wrap the matching element content.

Syntax 1:

Use the specified DOM element to wrap the content of the matching element.

The code is as follows:

$(selector).wrapInner(elem)

Parameter list:

Parameters	Description
elem	The DOM element used to wrap the target.

Example:

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
   p
   {
      width:200px;
      height:200px;
      border:1px solid blue;
   }
   p
   {
      width:150px;
      height:150px;
      border:1px solid red;
   }
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(
document
).ready(function(){
        $("button").click(function(){
            $("p").wrapInner(document.createElement("p"));
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

Syntax 2:

Use function Returns the element used to wrap the content of the matching element.

The code is as follows:

$(selector).wrapInner(function)

Parameter list:

Parameters	Description
function	Returns a function used to wrap the content of the matched element.

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
    p
   {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
           $("p").wrapInner(function(){
              return "<p></p>"
           });
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

语法三:

用html标记代码包裹匹配元素的内容。

代码如下:

$(selector).wrapInner(html)

参数列表:

参数	描述
html	用于包裹匹配元素内容的html标记代码。

实例:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
     p
    {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    p
   {
        width:150px;
        height:150px;
        border:1px solid red;
    }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").wrapInner("<p></p>");
        });
    });
</script>
</head>
<body>
    <p>这是p的内容，将会被包裹</p>
    <p>这是p的内容，将会被包裹</p>
    <button>用p包裹每个段落</button>
</body>
</html>

The above is the detailed content of Usage examples of wrapInner() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery.wrapInner() function usageNext article：Detailed explanation of jQuery.wrapInner() function usage

See more

Usage examples of wrapInner() method in jQuery

Related articles