JavaScript如何添加父元素

最新推荐文章于 2024-06-22 15:04:00 发布
最新推荐文章于 2024-06-22 15:04:00 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： Web前端 文章标签： JS HTML 原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/82965665
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="item">itme1</div>
    <div class="item">item2</div>
    <script>
        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)
         })
    </script>

</body>
</html>

ACGuan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript对指定元素添加父元素
weixin_44041414的博客
06-01 3109
在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。 本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。 我当时的实现代码是这样的： addDiv () { // 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {
如何在Javascript中获取父元素文本
04-04
在JavaScript中获取父元素文本是常见的操作，尤其在网页动态交互和数据处理中。这个过程涉及到HTML DOM（文档对象模型）的理解，它是浏览器用来表示HTML或XML文档的一种结构化表示，允许通过JavaScript来操纵页面...
JS中给元素添加父级标签
前端-尔嵘
10-21 4200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每日一文</title> </head> <body> <div class="shuai">shuai1</div&gt...
给一组元素添加父元素的方法
weixin_56071908的博客
05-16 98
原生 var lables = document.querySelectorAll('.item') var ele = document.createElement('div') ele.className='mq-supsub mq-non-leaf'; lables.forEach(function (lable,index) { lable.parentNode.repla...
探索HTML中的元素关系：父元素、子元素、祖先元素与后代元素
最新发布
一起coding，一起嗨。
06-22 593
探索HTML中的元素关系：父元素、子元素、祖先元素与后代元素
JS追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
K1nney的博客
10-16 1万+
append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加到父级的最前面 after(),在当前元素之后追加（是同级关系） before(),在当前元素之前追加（是同级关系） insertAfter(),将元素追加到指定对象的后面（是同级关系） insertBefore(),将元素...
Javascript中找到子元素在父元素内相对位置的代码
10-28
总结以上分析，文档所提供的JavaScript代码段提供了一种计算子元素相对于父元素垂直位置的方法，并且可以与父元素的滚动功能相结合，以实现动态定位子元素的效果。代码的实现依赖于对DOM元素 `offsetTop` 和 `...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...
flexFont.js:Javascript库，用于基于其父元素宽度的自适应字体大小
04-27
Javascript库，用于基于其父元素宽度的自适应字体大小。 查看现场演示 用法 添加 < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js " > </ script > < script type =...
js 原生将元素插入到父元素首位，jquery和原生两种方式
业余前端的职业经历
03-08 7144
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能，每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了 直接就是数据驱动 的 直接关注数据业务层就行了 少去了很多麻烦 这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧 写之前 先声明下 dom结构吧 <div class="parent"> <h1>hello worl...
js中如何找到一个子元素的父元素
weixin_45524582的博客
02-21 1万+
找父元素节点的方法有: 1)原生方法 元素.parentNode 返回元素的第一个父节点 2)Jquery方法(记得导包) 元素.parent() 返回元素的第一个父节点 元素.parents() 返回一个包含元素所有父节点的数组 下面有个例子: <!doctype html> <html lang="en"> <head> <meta c...
JavaScript之获取父级元素和子集元素
fsLees的博客
03-27 8826
获取父级元素和子集元素
JavaScript - DOM技术(四)
Qianmoer的博客
12-16 866
JavaScript - DOM技术(四)
JS获取父节点、子节点、兄弟节点
qq_44552416的博客
02-22 9166
1、访问父节点 parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null <div id="box"> <p id="hello">hello world!</p> </div> <script> var hello=document.getElementById("hello"); console.log(hello.parentNode.nodeName); //DIV </scr
jQuery——给元素添加父级的方法
桃花扇的博客
03-07 3154
介绍了.wrap()，.wrapAll(), .wrapInner(), .unWrap()方法
DOM基础
m0_53644435的博客
12-01 625
一、初识Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。 ...
js操作DOM在父元素中的结尾添加子节点注意
weixin_33709609的博客
10-17 2069
impressionHtml=`&lt;img src=${value} alt=""/&gt;`; document.getElementById("wrapper").appendChild(impressionHtml); js向父元素wrapper中的末尾添加 定义好的html，报错： Uncaught TypeError: Failed to execute 'appendC...
js 获取当前元素的父元素的父元素的id
热门推荐
weixin_38383877的博客
12-27 3万+
 情景一：用onclick触发的函数 html代码： &lt;div id="0" style="border-bottom:1px solid #000;margin:0 auto;"&gt; &lt;div&gt;1111&lt;/div&gt; &lt;div class="original"&gt; &lt;div id="
js 给父元素添加类
05-31
可以使用JavaScript为元素添加类，具体代码如下： ```javascript var element = document.getElementById('parent'); // 获取需要添加类的父元素 element.classList.add('class-name'); // 给父元素添加类 ``` 其中，`element`是需要添加类的元素，`classList.add`可以添加一个或多个类名，多个类名用空格隔开。例如，`class-name`是需要添加的类名。 通过给父元素添加类，可以方便地对其下的子元素应用样式，或者在JavaScript中对其进行操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值