给一组元素添加父元素的方法

最新推荐文章于 2024-09-02 07:00:00 发布
最新推荐文章于 2024-09-02 07:00:00 发布
阅读量98 收藏
点赞数
文章标签： html5 javascript dom jquery php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56071908/article/details/118172522
版权
这篇博客探讨了如何使用原生JavaScript和jQuery库进行DOM操作。通过示例代码，展示了如何选取所有类名为.item的元素，然后用新创建的带有'mq-supsubmq-non-leaf'类名的div包裹它们。同时，也介绍了jQuery的wrapAll方法，用于将匹配的元素集合包裹在一个指定的HTML结构中。这些技巧对于前端开发者优化页面性能和提升代码效率至关重要。
摘要由CSDN通过智能技术生成

 原生

var lables = document.querySelectorAll('.item')
var ele = document.createElement('div')
ele.className='mq-supsub mq-non-leaf';
lables.forEach(function (lable,index) {
     lable.parentNode.replaceChild(ele, lable)
     ele.appendChild(lable)
 })

JQ

$('.item').wrapAll('div')
地铁程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript对指定元素添加父元素
weixin_44041414的博客
06-01 3109
在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。 本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。 我当时的实现代码是这样的： addDiv () { // 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
weixin_31822835的博客
06-25 1249
今看到一篇很不错的vue组件传值文章，便于理解，遂作笔记～vue通常页面的视图App.vue应为这样 一.父组件向子组件传值浏览器1.建立子组件，在src/components/文件夹下新建一个Child.vue2.Child.vue的中建立props，而后建立一个名为message的属性函数 3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加messa...
jQuery怎么给元素添加父元素
心中有侠
09-14 4978
代码： $("选择器").wrap("<p></p>");  
JavaScript如何添加父元素
KevinMiGuan的博客
10-08 4209
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body>     <di
JS给指定元素添加父元素
Syclifer的博客
02-02 3308
var child = document.getElementById("child");// 获取子元素 var parent = document.createElement('parent');// 新建父元素 parent.className = 'parent'; child.parentNode.replaceChild(parent,child);// 获取子元素原来的父元素并将新父元素代替子元素 parent.appendChild(child);// 在新父元素下添加原来的...
CSS子元素选择父元素的实现
11-19
在子元素选择父元素的场景中，:has() 伪类允许我们指定一个子元素的条件，来选择符合该条件的父元素。例如，如果我们需要选择包含具有特定类（如.active）的标签的元素，我们就可以使用li:has(>a.active)这样的选择...
js获取元素下的第一级子元素的方法(推荐)
12-01
需要注意的是，这个方法并不适用于处理复杂的嵌套结构，因为当子元素的父元素不是直接的子元素而是嵌套在其他子元素内时，它可能无法正确地捕获这些子元素。此外，这种方法对性能有一定影响，特别是当元素包含大量子...
JavaScript DOM元素常见操作详解【添加、删除、修改等】
10-18
2. `getElementsByTagName`：根据标签名获取一组元素，返回的是一个NodeList集合。 3. `getElementsByClassName`：根据class属性获取一组元素，同样返回一个NodeList集合。 4. `getElementsByName`：根据name属性...
JS选取DOM元素常见操作方法实例分析
10-17
3. 使用classList操作类名：`classList`属性提供了一组更为方便的类操作方法。例如，添加类、移除类、切换类、检查类是否存在： ```javascript element.classList.add('newClass'); element.classList.remove('new...
JS中给元素添加父级标签
前端-尔嵘
10-21 4200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每日一文</title> </head> <body> <div class="shuai">shuai1</div&gt...
html添加一个父元素,给HTML页面指定元素添加属性，添加父元素
weixin_39568706的博客
06-14 882
给HTML页面指定元素添加属性，添加父元素下面拿一个给富文本中所有的图片增加layer弹窗效果。思路：给富文本父元素设置属性。获取父元素里所有的img 此处用到querySelectorAll函数for遍历标签修改需求复习jQuery属性wrap给指定元素增加父元素JS属性.src获取标签路径值setAttribute给标签赋值//给指定标签追加父元素$('.memorandummainli...
为指定元素添加一级父元素
JustOneRoad的专栏
12-25 1612
/** * 为指定的el，添加父元素newP */ addParent : function(el, newP) { var nodeTmp = $(el), index = nodeTmp.index(), parent = nodeTmp.parent(), node = nodeTmp.detach(); $(newP).append(no
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）|| 添加元素 元素属性（jQuery）
wj的博客
02-07 2759
<ul @click ="clickfun($event)"> <li></li> </ul> 获取元素 methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling
html 追加子元素,Dom元素子父节点操作、Dom元素创建追加
weixin_30983353的博客
06-02 1354
Dom元素子父节点操作通过父元素获取子元素var nav=document.querySelector("#nav");console.log(nav.childElementCount);console.log(nav.childNodes);childElementCount表示当前元素 子元素的个数childNodes表示子节点，包含文本和元素，返回的是Nodelist集合，返回值则包含le...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
逝者如风
07-02 9640
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" href="css/rest.css" /&g
js 原生将元素插入到父元素首位，jquery和原生两种方式
业余前端的职业经历
03-08 7144
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能，每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了 直接就是数据驱动 的 直接关注数据业务层就行了 少去了很多麻烦 这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧 写之前 先声明下 dom结构吧 <div class="parent"> <h1>hello worl...
给HTML页面指定元素添加属性，添加父元素
weixin_30421809的博客
12-29 688
给HTML页面指定元素添加属性，添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果。 思路： 给富文本父元素设置属性。 获取父元素里所有的img 此处用到querySelectorAll函数 for 遍历标签修改需求 复习jQuery属性 wrap给指定元素增加父元素 JS属性 .src获取标签路径值 setAttribute给标签...
中秋之美——html5+css+js制作中秋网页
最新发布
Timi2019的博客
09-02 1843
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
jQuery子页面操作父页面元素及交互实现
在父页面，有一个名为`addDate`的函数，它接收从子页面传递过来的日期字符串，并将其设置到父页面ID为"date"的元素的innerHTML，实现了子页面向父页面添加元素的效果。 这个示例展示了如何利用jQuery和JavaScript的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值