JS 为一组子节点添加父节点（包含本身文本节点）

最新推荐文章于 2024-04-04 00:57:34 发布

原创最新推荐文章于 2024-04-04 00:57:34 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中通过DOM操作，创建一个新的父节点，并将原有的子节点转移到新节点下，最后替换原有父节点。文章详细讲解了利用createElement()、appendChild()和replaceChild()方法实现这一过程，同时提到了CSS渲染权重的基本概念。

部署运行你感兴趣的模型镜像

在父节点下建立新的节点当作原有子节点的父节点

//假设这是原有父节点
let parent = document.getElementById("xxx");
//或者此为子节点的话用 parent.parentElement 来获取父节点
//创建新的父节点
let div = document.createElement("div");
//获取子节点数量 包含文本节点
//因为此处追加为元素的移动 所以 不直接遍历集本身 而是遍历固定数量 
let count = parent.childNodes.length;
//每次都将第一个元素追加到新元素上来保证追加顺序
for (let i=0;i<count;i++){div.appendChild(parent.childNodes[0]);}
parent.appendChild(div);