jQuery_DOM学习之------包裹元素的方法

Posted NotFoundObject

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery_DOM学习之------包裹元素的方法相关的知识,希望对你有一定的参考价值。

1、.wrap( )在集合中匹配的每个元素周围包裹一个html结构

简单的看一段代码:

<span>连接文字</span>

给span元素增加一个a包裹

$(‘span‘).wrap(‘<a href="http://soulsjie.com"></a>‘)

最后的结构,p元素增加了一个父div的结构


<a href="http://soulsjie.com"><span>连接文字</span></a>

2、DOM包裹unwrap()方法

要使用.remove()来删除选中元素的父元素是比较复杂的此时unwrap()可以将被选中的元素的父元素删除

使用:

 //找到所有p元素,删除父容器div
        $(‘p‘).unwrap(‘<div></div>‘)

3、DOM包裹wrapAll()方法

.wrap( )是针对单个元素进行包裹,当要包裹几个元素的时候需要用wrapall()

如:

想要包裹下面的p标签在一个div内:

<p>内容1</p>

<p>内容2</p>

//1.直接加参数,进行包裹

$(‘p‘).wrapAll(‘<div></div>‘)

//2.根据函数的返回值包裹内容

$(‘p‘).wrapAll(function() {
    return ‘<div><div/>‘; 
})

包裹后的结构如下:

<div>
    <p>内容1</p>
    <p>内容2</p>
</div>

4、DOM包裹wrapInner()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法

原本结构:

<div>内容1</div>
<div>内容2</div>

给div内容包裹上p元素

$(‘div‘).wrapInner(‘<p></p>‘)

最后的结构,匹配的div的内容被p给包裹了

<div>
    <p>内容1</p>
</div>
<div>
    <p>内容2</p>
</div>


以上是关于jQuery_DOM学习之------包裹元素的方法的主要内容,如果未能解决你的问题,请参考以下文章

菜鸟H5学习之清除浮动的7种方法

JAVA基础学习之使用对象

vue学习之组件

vue2.0学习之组件间通信

JQuery_DOM 节点操作之创建节点插入节点

Django学习之七:Django 中间件