gpt4 book ai didi

javascript - 通过 Javascript 添加时显示额外模板项的 HTML 模板

转载 作者:行者123 更新时间:2023-12-03 00:29:01 24 4
gpt4 key购买 nike

我有一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com