JavaScript如何添加父元素

最新推荐文章于 2024-11-18 04:42:29 发布
原创 最新推荐文章于 2024-11-18 04:42:29 发布 · 4.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JS #HTML #原生

本文介绍了一种使用JavaScript遍历并替换DOM中特定类名元素的方法。通过querySelectorAll选择所有目标元素，创建新div并赋予特定类名，然后用新元素替换原有元素，最后将原元素追加为新元素的子元素，实现DOM结构的重构。

<!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>

如何在Javascript中获取父元素文本
04-04
在JavaScript中获取父元素文本是常见的操作，尤其在网页动态交互和数据处理中。这个过程涉及到HTML DOM（文档对象模型）的理解，它是浏览器用来表示HTML或XML文档的一种结构化表示，允许通过JavaScript来操纵页面...
flexFont.js:Javascript库，用于基于其父元素宽度的自适应字体大小
04-27
Javascript库，用于基于其父元素宽度的自适应字体大小。 查看现场演示 用法 添加 < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js " > </ script > < script type =...
JS给指定元素添加父元素
Syclifer的博客
02-02 3574
var child = document.getElementById("child");// 获取子元素 var parent = document.createElement('parent');// 新建父元素 parent.className = 'parent'; child.parentNode.replaceChild(parent,child);// 获取子元素原来的父元素并将新父元素代替子元素 parent.appendChild(child);// 在新父元素下添加原来的...
JS中给元素添加父级标签
前端-尔嵘
10-21 4268
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每日一文</title> </head> <body> <div class="shuai">shuai1</div&gt...
给一组元素添加父元素的方法
weixin_56071908的博客
05-16 130
原生 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...
javascript对指定元素添加父元素
良_123的专栏
09-04 1172
在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。 本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。 我当时的实现代码是这样的： addDiv () { // 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {
JavaScript中将新增的html元素添加到元素列表首位的方法
最新发布
lixin5456985的博客
11-18 1688
在 JavaScript 中，将新增的 HTML 元素添加到元素列表的首位可以通过多种方式实现。
Javascript中找到子元素在父元素内相对位置的代码
10-28
总结以上分析，文档所提供的JavaScript代码段提供了一种计算子元素相对于父元素垂直位置的方法，并且可以与父元素的滚动功能相结合，以实现动态定位子元素的效果。代码的实现依赖于对DOM元素 `offsetTop` 和 `...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...
javascriptDom笔记(三)
码农1425的博客
11-01 438
DOM: 先找，再操作，没有才添加 1. 查找:   1. 基于当前节点找周围节点:     节点树:      parentNode childNodes firstChild      lastChild nextSibling previousSibling    元素树:     parentElement children      firstElementChild 
JS追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
K1nney的博客
10-16 1万+
append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加到父级的最前面 after(),在当前元素之后追加（是同级关系） before(),在当前元素之前追加（是同级关系） insertAfter(),将元素追加到指定对象的后面（是同级关系） insertBefore(),将元素...
js 原生将元素插入到父元素首位，jquery和原生两种方式
业余前端的职业经历
03-08 8066
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能，每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了 直接就是数据驱动 的 直接关注数据业务层就行了 少去了很多麻烦 这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧 写之前 先声明下 dom结构吧 <div class="parent"> <h1>hello worl...
Js：递归树
努力的nana
08-04 1760
递归树
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 4023
使用原生js来对元素进行创建,删除,复制,添加等操作
js如何给父元素添加两个子元素
Naughty_Fairy的博客
12-08 8217
很少用js创建元素，然后出bug解决了半天，只需要两行，搞了几个小时，必须得记录一下： 参考文章https://www.jb51.net/article/134880.htm 我需要的结构如下： 就是在div中创建一个img然后再创建一个span，但是使用appendChild每次只给最后一个div加了span，我通过jquery也添加，但结果一个div里面好几个span，最后通过克隆解...
html增加一个父节点,浅谈js的html元素的父节点,子节点
weixin_42653691的博客
07-07 367
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持示例："parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ，如下：My text在上面的代...
掌握JavaScript DOM操作：元素添加与替换实践指南
资源摘要信息:"JavaScript DOM操作添加和替换元素示例代码" JavaScript（通常缩写为JS）是一种高级的、解释执行的编程语言，它既是一种面向对象的脚本语言，又是一种基于原型的语言，它是运行在浏览器端的脚本语言...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值