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

【问题标题】：Insert a div element as parent插入一个 div 元素作为父元素
【发布时间】：2011-10-19 18:37:53
【问题描述】：

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

但更复杂的是，在其他地方我们已经做了类似的事情：

var testElement = document.getElementByID('testID')

其中 testID 是要在 div 中变形的元素的子元素。那么在我们完成插入之后，testElement 仍然有效吗？

顺便说一句：我没有使用 jquery。

有什么想法吗？

谢谢，

【问题讨论】：

通过使用 document.getElementByID() 您可以在所有 DOM 中搜索特定 ID。如果这个 ID 没有改变，你不会有任何问题

标签： javascript dom

【解决方案1】：

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

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

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

你可能想要这样的东西：

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

【讨论】：

只有当oldChild 是oldParent 的唯一或最后一个孩子时，您的特定示例才有效。否则节点的顺序会改变。

【解决方案2】：

你可以使用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 元素的引用就不会改变。

【讨论】：

【解决方案3】：

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

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

【讨论】：

如果myDiv 或其后代绑定（非内联）事件处理程序，您可能会遇到问题。它们不会被克隆。
有趣的一点，但他可以通过再次调用“addEventListener”或“attachEvent”函数来解决这个问题......或者我错了吗？当然，他需要知道要绑定哪个事件，这可能是个问题……或者有没有办法在克隆元素之前获取该绑定事件？

【解决方案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 值。

【讨论】：