[英]Can't clone <template> to append to <div>
I create this template successfully with javascript:我用javascript成功创建了这个模板:
I create the template in an async
function:我在async
函数中创建模板:
this.createBoxes = async function() {
var row_counter = 0;
for (var i = 1; i < this.fake_data.length + 1; i++) {
var item_box = document.createElement("div");
item_box.style.flex = "0.5";
item_box.style.backgroundColor = "white";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.id = "item_box_"+i;
var item_name = document.createElement("h3");
item_name.style.flex = "0.2";
item_name.style.backgroundColor = "orange";
item_name.style.alignSelf = "center";
item_name.innerText = this.fake_data[i - 1].name;
item_name.id = "item_name_"+i;
item_box.appendChild(item_name);
this_row = document.getElementsByClassName("row")[row_counter];
this_row.appendChild(item_box);
if(i % 2 == 0) {
var pool = document.getElementById("pool");
var inner_row = document.createElement("div");
inner_row.style.display = "flex";
inner_row.style.flexDirection = "row";
inner_row.style.flex = "0.5";
inner_row.style.justifyContent = "space-around";
inner_row.style.alignItems = "center";
inner_row.style.backgroundColor = "green";
inner_row.className = "row";
pool.appendChild(inner_row);
row_counter++;
}
else if(i == this.fake_data.length) {
return;
}
}
}
Then I do this:然后我这样做:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.content.cloneNode(true);
document.querySelector(".app").appendChild(clone);
})
But as you can see from my screenshot, .app
is empty.但正如你从我的截图中看到的, .app
是空的。 What am I doing wrong?我究竟做错了什么? I am using Cordova and I am assuming that it is able to use the template
tag, I haven't been able to find anything saying I can't.我正在使用 Cordova 并且我假设它能够使用template
标签,但我找不到任何说我不能的东西。
UPDATE更新
This happens:有时候是这样的:
When I do this:当我这样做时:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.cloneNode(true);
document.querySelector(".app").appendChild(clone);
});
Using template.cloneNode successfully moves the <template>
but this is obviously not what I want, I want to get the contents of the <template>
and move them to .app
container, not the whole <template>
.使用 template.cloneNode 成功移动了<template>
但这显然不是我想要的,我想获取<template>
的内容并将它们移动到.app
容器,而不是整个<template>
。
Well, if cloning the node itself works, then the answer is pretty simple - just clone/append children of the template:好吧,如果克隆节点本身有效,那么答案很简单 - 只需克隆/附加模板的子项:
this.createBoxes().then(function() {
let template = document.querySelector('#pool');
let app = document.querySelector(".app");
for(let child of template.childNodes) {
let clone = child.cloneNode(true);
app.appendChild(clone);
}
});
Note that I have not tested this code - you may need to debug it as necessary.请注意,我尚未测试此代码 - 您可能需要根据需要对其进行调试。
I added a container to the template programmatically:我以编程方式向模板添加了一个容器:
var pool = document.getElementById("pool");
var container = document.createElement("div");
container.style.flex = "1";
container.style.backgroundColor = "white";
container.style.display = "flex";
container.style.flexDirection = "column";
container.id = "container";
var row = document.createElement("div");
row.style.display = "flex";
row.style.flexDirection = "row";
row.style.flex = "0.5";
row.style.justifyContent = "space-around";
row.style.alignItems = "center";
row.style.backgroundColor = "green";
row.className = "row";
container.appendChild(row);
pool.appendChild(container);
Then instead of adding my content to the #pool
<template>
, I added it to #container
, and then stored the #container
node in a variable, and then imported that into .app
:然后我没有将我的内容添加到#pool
<template>
,而是将它添加到#container
,然后将#container
节点存储在一个变量中,然后将其导入到.app
:
var container_in_temp = document.querySelector('#pool>#container');
var targetContainer = document.querySelector('.app');
targetContainer.appendChild(document.importNode(container_in_temp, true));
So it ends up looking like this, with a container in .app
which is actually kind of preferable structure wise :).所以它最终看起来像这样,在.app
有一个容器,这实际上是一种更可取的结构:)。
You should be cloning the template's .content
instead, as demonstrated in the documentation .您应该克隆模板的.content
,如文档中所示。
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.