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

Posted 2020-10-13 NotFoundObject

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>