分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

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

发布时间:2023-09-06 01:23责任编辑:蔡小小关键词:jQueryDOM

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学习之------包裹元素的方法

原文地址:http://www.cnblogs.com/soulsjie/p/7803450.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved