Question

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

但是为了使事情变得复杂，我们已经在其他地方完成了以下事情：

var testElement = document.getElementByID('testID')

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

BTW：我没有使用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

假设您正在使用标准DOM方法（而不是innerHTML）进行操作，那么 - 是的。

移动元素不会破坏对它们的直接引用。

（如果您使用的是innerHTML，那么您将破坏正在设置该属性的元素的内容，然后创建新内容）

您可能需要以下内容：

var oldParent = document.getElementById('foo');
var oldChild = document.getElementById('bar');
var wrapper = document.createElement('div');
oldParent.appendChild(wrapper);
wrapper.appendChild(oldChild);

Answer 3

在纯JS中你可以尝试这样的东西......

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

Answer 4

这是另一个例子，只有新元素包装了'all'的子元素。

您可以根据需要进行更改，以使其包裹在不同的范围内。关于这个特定主题没有很多评论，所以希望它对每个人都有帮助！

var newChildNodes = document.body.childNodes;  
var newElement = document.createElement('div');

newElement.className = 'green_gradient';
newElement.id = 'content';        

for (var i = 0; i < newChildNodes.length;i++) {
    newElement.appendChild(newChildNodes.item(i));
    newChildNodes.item(0).parentNode.insertBefore(newElement, newChildNodes.item(i));
}

您需要将newChildNodes变量的'document.body'部分修改为新元素的父级。在这个例子中，我选择插入一个包装器div。您还需要更新元素类型以及id和className值。

插入div元素作为父元素

4 个答案: