首页 > 建站教程 > JS、jQ、TS >  js给dom包裹一层父标签正文

js给dom包裹一层父标签

js如何给dom包裹一层父标签,就像jQuery的wrap方法一样,要实现这个功能,就要了解replaceChild,下面是replaceChild的用法:
nodeObject.replaceChild(new_node, old_node)
其中nodeObject为父级节点,参数new_node为指定新的节点,old_node为被替换的节点。如果替换成功,则返回被替换的节点;如果替换失败,则返回null

具体实现方法如下:
1、假设要给下面两个div加个共同的父节点:
<div class="mydiv">mydiv</div>
<div class="mydiv">mydiv</div>
2、js
var divs = document.querySelectorAll('.mydiv')
var elem = document.createElement('div')
elem.className = 'father';
divs.forEach(function(div, index) {
    div.parentNode.replaceChild(elem, div)
    elem.appendChild(div)
})
最终实现效果:



可以看到,这两个div外面被包裹了一个class为father的div。