jQuery wrapInner() 方法

  • 定义和用法

    wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容(innerHTML)。
  • 语法

    $(selector).wrapInner(wrappingElement,function(index))
  • 参数描述

    参数 描述
    wrappingElement
    必需。规定包围在每个被选元素的内容周围的 HTML 元素。
    可能的值:
    • HTML 元素
    • jQuery 对象
    • DOM 元素
    function(index)
    可选。规定返回包裹元素的函数。
    • index - 返回集合中元素的 index 位置。
  • 实例

    下例演示了在每个 <p> 元素的内容上包裹 <b> 元素:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
    <style>
       b{background-color:red;}
    </style>
    //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
          $(document).ready(function () {
             $("button").click(function(){
                $("p").wrapInner("<b></b>");
             });
          });
    </script>
    </head>
    <body>
          <p>这是一个段落。</p>
          <p>这是另一个段落。</p>
          <button>点击在每个p元素的内容上包装一个b元素</button>
    </body>
    </html>
    
    尝试一下