jquery操作HTMLwrap,wrapAll,wrapInner区别

 时间:2026-02-16 11:18:43

1、jq里面有很多相同的属性,网上大部分都是官方解释,今天说说自己对wrap方法的理解。

 1.wrap()- 

 语法:$("被选元素").wrap("html内容或者元素");

理解:

把每个“被选元素”都 包裹(放置)到HTML内容或者元素中,

相当于给每个”被选元素“加直接父级。

举例: $("p").wrap("<div></div>");

  网页里每个:

这是p1段落

这是p2段落 

执行后变成了:  

 <div>是p1段落</div>

<div>是p2段落</div>

2、2.wrapALL()- 

 语法:$("被选元素").wrapAll("html内容或者元素");

理解:

把所有“被选元素”都 包裹(放置)到HTML内容或者元素中,

相当于给每个”所有被选元素“一起加一个直接父级

举例: $("p").wrapALL("<div></div>");

  网页里所有:

这是p1段落

 <h1>这是p中间的h1</h1>

 这是p2段落

 

执行后变成了:

<div>

     是p段落

    这是p2段落

</div>

   <h1>这是p中间的h1</h1>

3、3.wrapInner()-

 语法:$("被选元素").wrapInner("html内容或者元素");

理解:

 在每个“被选元素”内部  放置 HTML内容或者元素,

相当在每个”被选元素“下面加了直接子集

举例: $("p").wrapInner("<b></b>");

  网页里有:

这是p1段落

 <h1>这是p中间的h1</h1>

 这是p2段落

 执行后变成了:

 <b>这是p1段落</b>

 <h1>这是p中间的h1</b></h1>

 <b>这是p2段落</b>

4、4.unwap()-

语法:   $("被选元素").unwrap();

理解:删除每个“被选元素”的直接父级

举例: $("p").unwrap();

  网页里有:

<div>

<article>

这是 article元素中的段落。

</article>

</div>

<article>

这是 article 元素中的段落。

</article>

执行后变成:

<div>

 这是 article元素中的段落。

 </div>

这是 article 元素中的段落。

  • 如何利用jquery方法wrapInner向DOM插入元素
  • wrap是什么意思
  • WRAP认证怎么操作?有什么流程
  • 如何使用CSS3 word-wrap 属性
  • wrapInner() 方法在每个p元素的内容上包围b元素
  • 热门搜索
    海边旅游 都江堰旅游攻略 长沙旅游 衢州旅游 旅游作文 呼伦贝尔旅游 郑州旅游职业学院 腾冲旅游攻略 夏季旅游 情侣旅游