Question

使用jQuery，它很容易解开元素，但使用纯JS，并不容易。我花了最后2个小时尝试但没有结果。我阅读了Google和SO上的所有主题，但没有解决方案。他们中的大多数使用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);

我用

document.insertNode（temp.firstChild）;

问题是只有firstChild被插入文档中。

你可能会说我需要的东西没用，但事实并非如此！我有一个website（正如你所看到的）是veeery加载的，充满了CSS效果，当你向下滚动页面时，它会被更多的加载和加载。如果我可以解开这个外部div，那将是很棒的，因为我将在网站中插入至少120个组件。

我正在优化这个网站流量来平衡它，所以我会把它全部写成脚本。将有最小的HTML。所有的图像和剩余的div都将使用这种方法插入，所以最后我不想要在DOM中删除120个无用的div。我有我的理由所以我在这里不讨论原因，但我需要解开div。

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

Answer 1

如果某人仍然感兴趣，可以使用Range.selectNodeContents()获取所有元素的内容，然后使用Range.extractContents()提取到DocumentFragment中。之后，没有什么能阻止您使用ParentNode.replaceChild，因为DocumentFragment是一个普通的Node。

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

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

1 个答案: