Question

我有一个HTML模板，该HTML模板在调用on-load事件时使用Javascript进行填充，由于某种原因，基本模板本身会显示，尽管它不是我循环遍历的数组的一部分，但我不知道为什么。从我的理解来看，模板仅显示附加到文档正文中的时间，但是基本模板除了附加的模板之外还显示（减去自基本模板占据第一个位置以来的最后一个模板），我可以通过更改基本模板中的数据来进行验证。

我无法使用jQuery解决方案，因为这将通过仅接受纯Javascript的函数读取到iOS Web视图中。

我的代码如下，如果任何人都可以解释为什么初始模板显示自身，我将不胜感激。我一直在寻找解决方案，却一无所获，认为我可能误解了模板的工作原理。

<script>
    var titles = ["Item1", "Item2", "Item3", "Item4", "Item5"];

    function addGalleryItem() {
        var template = document.querySelector("#galleryTemplate");
        var label = template.content.querySelector(".caption");
        var node;  

        for (var i = 0; i < titles.length; i++) {
            node = document.importNode(template.content, true);
            label.innerHTML = titles[i];
            document.body.appendChild(node);
        }
    }
</script>

<html>
    <body onload="addGalleryItem()">
        <template id="galleryTemplate">
            <div class="galleryItem">
                <img class="galleryImage" src="img.png" alt="Unknown-1" width="275" height="183">
                <div class="caption">
                    <label></label>
                </div>
            </div>
        </template>
    </body>
</html>

Answer 1

我认为，您的代码唯一的错误是您正在将innerhtml分配给'node'变量之后的'label'变量，因此正确的代码是

for (var i = 0; i < titles.length; i++) {
        label.innerHTML = titles[i];
        node = document.importNode(template.content, true);
        document.body.appendChild(node);
    }

模板未呈现，您的循环有5个项目，因此正在运行5次。

Answer 2

它简单吗：

tick

但是我也认为您在错误的位置查询标签：

<!DOCTYPE html>

通过Javascript添加的HTML模板显示了一个额外的模板项

2 个答案: