我有一个 HTML 模板，当调用 on-load 事件时，我使用 Javascript 填充该模板，由于某种原因，基本模板本身显示，尽管它不是我循环遍历的数组的一部分，但我不明白为什么。根据我的理解，模板仅在附加到文档正文时显示，但基本模板除了附加模板之外还显示(减去最后一个，因为基本模板占据了第一个位置)，我可以通过更改基本模板中的数据来验证这一点。
我无法使用 jQuery 解决方案，因为这将通过仅接受纯 Javascript 的函数读入 iOS Web View 。
我的代码如下，如果有人能解释为什么初始模板会自行显示，我将不胜感激。我已经寻找解决方案，但没有找到任何东西，我想也许我误解了模板的工作原理。
<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> 最佳答案
我认为，您的代码唯一的问题是您将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 个项目。
关于javascript - 通过 Javascript 添加时显示额外模板项的 HTML 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53958239/