javascript - 将内容附加到模板标签中

标签 javascript html5-template

我正在尝试将内容附加到模板标签中。我正在使用

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;
}

让我烦恼的是追加到模板中,它什么也没做,当我尝试复制它的内容时,它说它有 0 个 child ,我想如果我打印 div 的 child ,它会打印正确的数字。

为什么内容没有附加到模板中?这是正确的方法还是有任何特定的方法可以正确地将内容附加到模板中?

最佳答案

您应该将片段附加到 template.content 而不是 template:

template.content.appendChild( x )

关于javascript - 将内容附加到模板标签中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37898043/

相关文章:

javascript - 使用 html <template> : innerHTML. 替换

javascript - HTML 模板和 HTML 导入 - Firefox 中不执行内部脚本

javascript - XMLHttpRequest open() 在 Chrome 中失败

javascript - 如何将 HTML 中的内联 JavaScript 事件处理程序转换为参数化?

javascript - 如何检测 Windows Mobile 5 浏览器中的 JavaScript 按键事件?

javascript - D3 用坐标 ML 绘制路径

javascript - 根据最小和最大日期对数组进行排序?

javascript - 在不调用 connectedCallback 的情况下交换 "Custom Element"

javascript - 如何从类内访问自定义元素的下一个同级元素?

javascript - 在文档片段: Failed to execute 'insertAdjacentHTML' on 'Element' : The element has no parent中