Javascript 插入一个 div 元素作为父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6938248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert a div element as parent
提问by AJ.
I'm just wondering if the following is possible, lets say we have a dom element and we want to wrap this element in a div. So a div is inserted between the element and it's parent. Then the div becomes the element's new parent.
我只是想知道以下是否可行，假设我们有一个 dom 元素，并且我们想将此元素包装在一个 div 中。所以在元素和它的父元素之间插入了一个 div。然后 div 成为元素的新父元素。
But to complicate things, elsewhere we have already done things like:
但让事情复杂化的是，我们已经在其他地方做过类似的事情：
var testElement = document.getElementByID('testID')
where testID is a child of the element to be warapped in a div. So after we have done our insertion will testElement still be valid?
其中 testID 是要在 div 中扭曲的元素的子元素。那么在我们完成插入之后，testElement 仍然有效吗？
BTW: I'm not using jquery.
顺便说一句：我没有使用 jquery。
Any ideas?
有任何想法吗？
Thanks,
谢谢，
AJ
AJ
回答by Felix Kling
You can use replaceChild[docs]:
您可以使用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);
As long as you are not using innerHTML(which destroys and creates elements), references to existing DOM elements are not changed.
只要您不使用innerHTML（它会破坏和创建元素），对现有 DOM 元素的引用就不会更改。
回答by Quentin
Assuming you are doing your manipulation using standard DOM methods (and not innerHTML) then — yes.
假设您正在使用标准 DOM 方法（而不是 innerHTML）进行操作，那么 - 是的。
Moving elements about does not break direct references to them.
移动元素不会破坏对它们的直接引用。
(If you were using innerHTML, then you would be destroying the contents of the element you were setting that property on and then creating new content)
（如果您使用的是innerHTML，那么您将破坏您设置该属性的元素的内容，然后创建新内容）
You probably want something like:
你可能想要这样的东西：
var oldParent = document.getElementById('foo');
var oldChild = document.getElementById('bar');
var wrapper = document.createElement('div');
oldParent.appendChild(wrapper);
wrapper.appendChild(oldChild);
回答by Gatekeeper
In pure JS you can try something like this...
在纯 JS 中，你可以尝试这样的事情......
var wrapper = document.createElement('div');
var myDiv = document.getElementById('myDiv');
wrapper.appendChild(myDiv.cloneNode(true));
myDiv.parentNode.replaceChild(wrapper, myDiv);
回答by Ryan
Here is another example, only the new element wraps around 'all' of its child elements.
这是另一个示例，只有新元素环绕其“所有”子元素。
You can change this as necessary to have it wrap at different ranges. There isn't a lot of commentary on this specific topic, so hopefully it will be of help to everyone!
您可以根据需要更改它以使其在不同的范围内换行。关于这个特定主题的评论不多，所以希望它对大家有所帮助！
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));
}
You will want to modify the 'document.body' part of the newChildNodes variable to be whatever the parent of your new element will be. In this example, I chose to insert a wrapper div. You will also want to update the element type, and the id and className values.
您需要将 newChildNodes 变量的“document.body”部分修改为新元素的父元素。在这个例子中，我选择插入一个包装 div。您还需要更新元素类型以及 id 和 className 值。
