3

使用 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 被插入到文档中。

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

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

OBS：有一种方法正在使用outerHTML = innerHTML，但每次调用它都会重新绘制所有页面。所以这是一个可怕的想法。

4

1 回答 1

2

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

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

于 2014-01-09T04:51:50.067 回答