追加克隆的模板仍为片段类型

Question

我似乎在克隆模板内容并附加它时遇到了问题。我一直认为当你附加一个document.fragment时，它会将自己转换为一个节点。

如果您检查下面的示例，您将看到附加后的克隆变量仍然没有父节点。

(function() {
  var template = document.getElementById('template'),
    wrapper = document.getElementById('wrapper'),
    body = document.getElementsByTagName('body')[0],
    rows = {};
    
  for (var i = 0; i < 5; i++) {
    var clone = document.importNode(template.content, true);
    body.appendChild(clone);
    rows[i] = clone;
    
    console.log(clone.parentNode);
  }
    
})();

<div id="wrapper"></div>
<template id="template">
  <div class="row">
    <p>test</p>
  </div>
</template>

我错过了什么吗？

---

编辑： K 在阅读了一些 https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment 后，我遇到了这个：

。使用节点接口将片段追加或插入到 DOM 中 方法，如 appendChild(( 或 insertBefore((。这样做会移动 片段的节点进入 DOM，留下一个空的 DocumentFragment。

那么我们如何跟踪克隆的元素作为节点呢？

Answer 1

您在文档中找到的内容是正确的。node变量仍然引用DocumentFragment。 您要做的是查询父元素的子元素。

您的代码将如下所示：

(function() {
  var template = document.getElementById('template'),
    wrapper = document.getElementById('wrapper'),
    body = document.getElementsByTagName('body')[0],
    rows = {};
  for (var i = 0; i < 5; i++) {
    var clone = document.importNode(template.content, true);
    body.appendChild(clone);
    rows[i] = clone;
  }
  // find all elements with the class 'row' assigned
  // in other words: find all cloned nodes
  console.log(body.querySelectorAll('.row'));
})();

Answer 2

在克隆上使用querySelector()来获取.row元素并插入它

(function() {
  var template = document.getElementById('template'),
    wrapper = document.getElementById('wrapper');
    
  for (var i = 0; i < 5; i++) {
    var clone = document.importNode(template.content, true),    
    div = clone.querySelector('.row');
    
    div.addEventListener('click', function(){
       console.log('click')
       console.log(this.parentNode)
    })
    
    wrapper.appendChild(div);
     
  }
    
})();

<div id="wrapper"></div>
<template id="template">
  <div class="row">
    <p>test</p>
  </div>
</template>