千寻前端

原生js给dom包裹一层父标签

2021-12-30 23:45:16javascriptjs

原始dom

<body>
    <div class="child">111</div>
</body>

期望的效果

<body>
    <div class="parent">
        <div class="child">111</div>
    </div>
</body>

javascript实现

// 取到原始dom
let child = document.querySelector('.child')

// 创建一个空的父标签
let parent = document.createElement('div')
parent.classList.add('parent');

// 替换原标签
child.parentNode.replaceChild(parent, child)

// 还原旧标签
parent.appendChild(child)