Javascript 不使用jQuery并使用createElement展开元素

使用jQuery可以很容易地展开元素，但使用纯JS就不那么容易了。我花了两个小时尝试，但没有结果。我阅读了谷歌上的所有主题，没有任何解决方案。它们中的大多数使用jQuery，其他的则不进行交叉浏览

到目前为止，我已经：

    var temp = document.createElement("div");
    temp.innerHTML = "HERE COMES A COMPLEX HTML WITH SEVERAL DIVS, SPANS...";
    document.insertNode(temp);

问题是，我的HTML代码被插入时周围有“div”。我需要将此div从父级删除。我做了一个尝试，也许是一个线索，但到目前为止没有帮助：

而不是：

document.insertNode(temp);

我用

文档插入节点（临时firstChild）

问题是文档中只插入了第一个子项

你可能会说我需要的东西没用，但事实并非如此！我有一个（如你所见）是veeery加载的，充满了css效果，当你向下滚动页面时，它会越来越加载。如果我能打开这个外部分区，那就太好了，因为我将在网站中插入至少120个组件

我正在优化这个websit流量来平衡它，所以我将把它全部编成脚本。将有最小的html。所有的图像和剩余的div都将使用这种方法插入，所以最后我不希望DOM中有120个本来可以删除的无用div。我有我的理由，所以我在这里不讨论为什么，但我需要打开div

---

OBS：有一个方法使用outerHTML=innerHTML，但每次调用它时都会重新绘制所有页面。所以这是一个糟糕的主意。

如果有人仍然感兴趣，可以使用

范围获取所有元素的内容。选择nodeContents（）

，然后使用

范围提取内容（）

提取到文档片段中。此后，没有任何东西可以阻止您使用

ParentNode.replaceChild

，因为DocumentFragment是一个普通节点

---

不确定性能，但至少没有单独的节点被提取和插入，应该非常快。

我不能使用jQuery，因为我将从优化的网站中删除它。我将只使用纯JS。使用循环，并插入

.firstChild

s，直到

temp

中没有剩余。如

while（temp.firstChild）document.body.appendChild（temp.firstChild）中所示

@CrazyTrain正如我所说，我将在页面上插入大约120个元素，循环每个元素以找到它的子元素将消耗大量时间和cpu。这里的目标是优化，它将使网站呈现比已经呈现的更糟糕。如果不使用临时div，您可以使用文档片段，这里的检查可能是：var text=document.createTextNode（“相同文本”）；document.body.appendChild（文本）；