插入div元素作为父元素

Question

我只是想知道以下是否可行,让我们说我们有一个dom元素,我们想要将这个元素包装在div中.所以在元素和它的父元素之间插入一个div.然后div成为元素的新父级.

但是为了使问题复杂化,我们已经在其他地方完成了以下事情:

var testElement = document.getElementByID('testID')

其中testID是要在div中包装的元素的子元素.所以在我们完成插入后,testElement仍然有效吗？

顺便说一句:我没有使用jquery.

有任何想法吗？

谢谢,

AJ

Answer 1

你可以使用replaceChild ^[docs]:

// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);

只要您不使用innerHTML(销毁和创建元素),就不会更改对现有DOM元素的引用.

Answer 2

在纯 JS 中你可以尝试这样的事情......

var wrapper = document.createElement('div'); 
var myDiv = document.getElementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv);