W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <body> <style> .myClass { color: white; background-color: DodgerBlue; padding: 20px; text-align: center; margin: 10px; } </style> <h1>template 元素</h1> <p>此例对数组中的每一项使用一个新的 div 元素填充网页。</p> <p>每个 div 元素的 HTML 代码都位于 template 元素内。</p> <p>单击下面的按钮可显示 template 元素中隐藏的内容。</p> <button onclick="showContent()">显示隐藏内容</button> <template> <div class="myClass">我喜欢：</div> </template> <script> let myArr = ["奥迪", "宝马", "奔驰", "保时捷", "捷豹", "阿斯顿马丁"]; function showContent() { let temp, item, a, i; temp = document.getElementsByTagName("template")[0]; // 从模板中获取 div 元素： item = temp.content.querySelector("div"); // 遍历数组中的每个项目： for (i = 0; i < myArr.length; i++) { // 创建一个基于模板的新节点： a = document.importNode(item, true); // 添加数组中的数据： a.textContent += myArr[i]; // 将新节点追加到您喜欢的任何位置： document.body.appendChild(a); } } </script> </body> </html>