如何在现有的父元素和子元素之间插入一个 DIV？

Question

假设我有一个带有父节点和一组子节点的部分dom树。
如何在它们之间插入一个DIV？
我从以下内容开始：

parent --+--> child[0]
         |--> child[1]
         |--> child[2]

...而我希望以这个结束

parent ---> newdiv ---+--> child[0]
                      |--> child[1]
                      |--> child[2]

我该如何做到这一点？

我需要replaceChild()的相反操作。是否有类似于replaceParent()的东西？

我想我可以克隆所有子节点，然后将它们作为新节点的子节点插入。但是...这是否保留了所有元素的id？

---

编辑 - 我没有使用jQuery或任何框架标记它，但也许我应该明确说明。这不是一个jQuery问题。我想在javascript + DHTML中完成此操作。不要使用额外或外部框架。

- Cheeso

---

我认为克隆所有子节点将是最好的选择...查看jQuery的wrapAll源代码（我认为它几乎可以满足您的需求），这似乎是所做的（尽管我没有彻底分析它）：http://james.padolsey.com/jquery/#v=1.6.2&fn=jQuery.fn.wrapAll 如果您可以使用jQuery，我建议使用它！ - James Allardice

正确，wrapAll()就是解决方案：http://jsfiddle.net/2U7rm/1/ - Tomasz Nurkiewicz

Answer 1

您可以通过将元素附加到新父元素来移动元素。在普通的JavaScript中：

您可以通过将元素附加到新的父元素来移动它们。在纯JavaScript中：

var newDiv = document.createElement("div");

while(parent.hasChildNodes())
    newDiv.appendChild(parent.firstChild);

parent.appendChild(newDiv);

根据W3C有关appendChild的文档:

将节点newChild添加到此节点的子节点列表末尾。如果newChild已经在树中，它将首先被删除。

- Elian Ebbing

---

只是为了澄清 - 将一个元素附加到新的父元素上，会删除它与现有父元素的关系。这样对吗？ - Cheeso

@Cheeso - 是的，请参考 https://developer.mozilla.org/En/DOM/Node.appendChild 上的注释。在每个浏览器中都是这样工作的。 - Elian Ebbing

Answer 2

$('.child').wrapAll('<div class="newdiv"></div>');

更多信息: http://api.jquery.com/wrapAll/

- Ahmet Recep Navruz

Answer 3

作为使用.firstChild的替代方案，我们可以使用.firstElementChild。.firstChild属性可能会返回只包含HTML格式文本的textNode；即第一个子节点可能只是一个带有nodeValue = \n 的textNode。

如果你只想移动子元素而不是textNodes，请考虑以下代码片段：

    const newDiv = document.createElement("div");

    // Insert a new div in between a parent and its children
    while (parent.childElementCount > 0) {
        newDiv.appendChild(parentDiv.firstElementChild);
    }
    parentDiv.appendChild(newDiv)

请参见this，了解有关HTML文件中的空格如何保留为活动DOM的一部分的详细信息。

- Josh Desmond