问题标签 [documentfragment]

我正在开发一个 javascript 项目，在该项目中我使用文档片段一次附加多个 span 元素。然后他们用css动画。

我试图弄清楚动画完成后如何删除跨度。我用过

当它只适用于一个元素时它工作正常，但我需要删除片段中的所有元素。

我感谢你的帮助。

<template>我使用函数获得了 HTML5 的活动副本importNode()：

在此之后，我填充动态数据，

最后，我将节点附加到目标容器中：

我的问题：result节点的所有内容都被剥离了：我无法在结果节点中访问模板的组件元素。实际上，一旦执行了操作，该result节点就根本不包含子节点。appendChild

我希望 的返回值appendChild应该指向已插入容器中并且现在是活动文档的一部分的节点。任何解释为什么不是这种情况？

这是 jsfiddle（在 Chrome 53 中测试）：

https://jsfiddle.net/rplantiko/mv2rbhym/

我认为 DocumentFragment 的全部意义在于能够在不接触 DOM 的情况下构造内容，直到它准备就绪。

鉴于 DocumentFragment 不支持innerHTML，它可能有点乏味。另一方面，一旦构建完成，通过片段本身很容易将内容添加到现有的 DOM 节点。

如果我创建一个div而不将它添加到 DOM，我可以按照我喜欢的方式填充它，包括innerHTML. 据我所知，它应该不会对性能产生额外的影响。

是否有一种简单的方法（即一行左右）将现有 DOM 节点的内容复制到 DocumentFragment？该过程如下所示：

这样我就可以两全其美了。

回答

下面是@KevBot 的答案，并入示例中：

我正在使用 DocumentFragment 将一些子节点附加到列表中，但是在某些浏览器中我遇到了不支持的问题。所以我想知道除了检查浏览器是否在支持的浏览器列表中（或者至少是为我完成这项工作的方法）之外，还有另一种检查方法吗？

对不起！！！这是我正在使用的代码

容器是 Jquery 对象（$('#listF')）

已解决：我的错误，我使用的 append() 似乎适用于 chrome，但不适用于其他浏览器。在 documentFragment 上追加元素的正确方法是 appendChild()。

工作代码：

如果我将注释节点插入到文档片段中，我可以稍后将其转换为 HTML 吗？例子：

这在片段内部会是什么样子：

以及完成后应该如何（实际 DOM）：

背景：

将 HTML 插入片段有很多限制。片段不支持innerHTML等insertAdjacentHTML。还有其他方法可以将 HTML 放入片段中，但它们会删除某些元素并只留下内部文本。例如，使用createRangeAPI 创建片段会删除这些类型的节点，我将留下一个只有文本节点“数据”的片段

希望如果我可以将评论转换为实际的 DOM，它将按预期工作。

我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有 innerHTML 设置器，所以我尝试在 DocumentFragment 中插入一个临时节点，并在它之后使用insertAdjacentHTML. 然后我会删除临时元素，并留下一个带有我想要的 DOM 的片段。

示例：（错误是故意的）

我可以清楚地看到临时元素有一个 parentNode，那么为什么会出现此错误？