2

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

  function getTemplate() {
    var t = document.getElementById("example");
    return document.importNode(t.content,true);
  }

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

  var t = fillTemplate({
    id:"test",
    text:"Enter test data"
  });

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

  var c = document.getElementById("container");
  var result = c.appendChild(t);

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

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

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

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

4

1 回答 1

2

这是因为您不操纵 aNode而是操纵 a DocumentFragment。

如果您想获得插入的节点数，您应该在父容器上执行调用（c在您的示例中），然后您将得到正确的答案（5）。

但是如果你只想计算你添加的子元素，你不应该使用 childNodes，而是使用 ParentNode 接口的属性children：

c.childNodes.length  // = 5
c.children.length    // = 2

附加到容器c后， DocumentFragmentt不再有子级。

从MDN 文档：

各种其他方法可以将文档片段作为参数（例如，任何 Node 接口方法，例如 Node.appendChild 和 Node.insertBefore），在这种情况下，片段的子项将附加或插入到您插入的 DOM 中的位置文档片段，而不是片段本身。片段本身继续存在（在内存中），但现在没有孩子。

DOM 3 W3C 建议也很明确：

此外，各种操作——例如插入节点作为另一个节点的子节点——可以将 DocumentFragment 对象作为参数；这导致 DocumentFragment 的所有子节点被移动到该节点的子列表中。

于 2016-10-02T19:43:04.547 回答