Question

我使用javascript成功创建了此模板：

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

然后我这样做：

    this.createBoxes().then(function() {
        var template = document.querySelector('#pool');
        var clone = template.content.cloneNode(true);
        document.querySelector(".app").appendChild(clone);
    })

但是，正如您从我的屏幕截图中看到的那样，.app是空的。我究竟做错了什么？我使用的是Cordova，我假设它可以使用template标签，但我找不到任何不能的东西。

更新

发生这种情况：

当我这样做时：

    this.createBoxes().then(function() {
        var template = document.querySelector('#pool');
        var clone = template.cloneNode(true);
        document.querySelector(".app").appendChild(clone);
    });

使用template.cloneNode成功移动<template>，但这显然不是我想要的，我想获取<template>的内容并将其移动到.app容器，而不是整个<template>。

Answer 1

好吧，如果克隆节点本身可以工作，那么答案就很简单-只需克隆/附加模板的子代：

public class Object {

    @ElementCollection(fetch = FetchType.EAGER)
    @CollectionTable(name = "object_translation",
                 foreignKey = @ForeignKey(value = ConstraintMode.CONSTRAINT, name = "fk_object_translation_object"),
                 joinColumns = @JoinColumn(name = "object_id"))
    @MapKeyColumn(name = "language", nullable = false)
    @MapKeyEnumerated(EnumType.STRING)
    @Column(name = "translation", nullable = false)
    private Map<Language, String> translations;
}

请注意，我尚未测试此代码-您可能需要根据需要对其进行调试。

Answer 2

我以编程方式向模板添加了一个容器：

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

然后，我没有将我的内容添加到#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));

因此最终看起来像这样，.app中有一个容器，实际上这是一种更可取的结构：）。

Answer 3

您应该克隆模板的 .content，如 the documentation 中所示。

  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);

无法克隆<template>追加到<div>

3 个答案: