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中这样做。没有额外或外部框架。

Answer 1

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

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

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

parent.appendChild(newDiv);

来自documentation of W3C关于appendChild：

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

Answer 2

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

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

Answer 3

作为使用 .firstChild 的替代方法，您还可以使用 .firstElementChild。属性 .firstChild 可以返回仅包含 HTML 格式文本的 textNodes；即，第一个孩子可能只是一个具有 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)

有关 HTML 文件的空白如何保留为活动 DOM 的一部分的详细信息，请参阅 this。

如何在现有父母和孩子之间插入DIV *？

3 个答案: