插入一个div元素作为父元素

Question

我想知道下面的操作是否可行，假设我们有一个DOM元素，并且我们想要将这个元素包装在一个div中，就是在该元素和其父元素之间插入一个div，并且让这个div成为该元素的新父元素。

但是为了让事情变得更加复杂，我们已经在其他地方做了一些操作：

var testElement = document.getElementByID('testID')

假设testID是要被包裹在一个div元素内的子元素。那么在我们完成插入操作后，testElement还会有效吗？

顺便说一下：我没有使用jQuery。

有什么想法吗？

谢谢，

AJ

- AJ.

---

通过使用document.getElementByID()，您可以搜索特定ID的整个DOM。如果此ID不更改，则不会遇到任何问题。 - chchrist

Answer 1

你可以使用replaceChild^[文档]方法：

// `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元素的引用就不会改变。

- Felix Kling

Answer 2

在纯JS中，你可以尝试像这样做...

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

- Gatekeeper

---

如果 myDiv 或其子级元素有绑定事件处理程序（非内联），那么可能会出现问题。它们不会被克隆。 - Felix Kling

有趣的观点，但他可以通过再次调用“addEventListener”或“attachEvent”函数来解决这个问题……或者我错了吗？当然，他需要知道要绑定哪个事件，这可能是个问题……或者在克隆元素之前有获取已绑定事件的方法吗？ - Gatekeeper

Answer 3

假设您使用标准的DOM方法进行操作（而不是innerHTML），那么可以肯定，移动元素不会破坏对它们的直接引用。

（如果您使用innerHTML，则会破坏设置该属性的元素的内容，然后创建新内容）

您可能需要类似以下的代码：

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

- Quentin

---

你的特定示例仅在oldChild是oldParent的唯一或最后一个子节点时才有效。否则，节点的顺序会改变。 - Felix Kling

Answer 4

这是另一个例子，只有新元素包裹着其所有子元素。

您可以根据需要更改此范围以使其在不同的范围内包裹。对于这个特定的话题没有太多的评论，希望它能对大家有所帮助！

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 值。

- Ryan