将内容添加到模板标签中

Question

我正在尝试将内容添加到模板标签中。我使用的是：

getcontent("clients.json").then(function(x){
   obj = JSON.parse(x);
}).then(function(x){

   var x = createFullList(obj,docFragment);
   filtered = obj;
   return x;
}).then(function(x){
   template   .appendChild(x);
   var clone = document.importNode(template.content, true);
   alert(clone.children.length);
   aside.appendChild(clone)
});

getcontent是一个ajax调用，它返回响应，该响应被解析并存储为obj变量的对象。

createFullList为ajax响应中的每个元素创建div，并将其附加到片段中，然后将片段附加到返回的div中。

function createFullList( obj , fragment ){
   var aside       = document.getElementsByClassName("one")[0];
   for( x in obj ){
      createInfoElement( fragment , obj[x].general , obj[x].job , x);
   }
   var div = document.createElement("div");
   div.appendChild(fragment);
   deleteKid( aside , 1 );
   return div;
}

我遇到的问题是在模板中追加内容时，它什么也不做。当我尝试复制其内容时，它显示没有子元素，尽管如果我打印div的子元素，则会打印正确的数量。

为什么内容没有被追加到模板中？这是正确的方法还是有特定的方法可以正确地将内容追加到模板中？

- Darlyn

Answer 1

您应该将片段添加到template.content而不是template中：

template.content.appendChild( x )

- Supersharp

Answer 2

如果您只使用一个then()，像这样：

var obj;
getcontent("clients.json").then(function(x){
   obj = JSON.parse(x);
}).then(function(){
  var x = createFullList(obj, docFragment);
  filtered = obj;

  template.appendChild(x);
  var clone = document.importNode(template.content, true);
  alert(clone.children.length);
  aside.appendChild(clone)

  return(x);
});

我相信你正在尝试引用一个在template.appendChild()所引用的范围之外不可用的变量。

- Sergio Moura

---

这并不是问题，当我尝试使用alert(x.children.length)时，它输出了正确数量的子元素。为了确保，我也进行了测试，行为仍然相同。 - Darlyn