主页
HTML 参考手册
HTML <template> 标签
tryhtml5_template3
运行 ❯
×
更改方向
保存代码
更改主题
<!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 代码都在模板元素中。</p> <p>单击下面的按钮可显示模板元素中隐藏的内容。</p> <button onclick="showContent()">显示隐藏内容</button> <template> <div class="myClass">I like: </div> </template> <script> var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; //get the div element from the template: item = temp.content.querySelector("div"); //for each item in the array: for (i = 0; i < myArr.length; i++) { //Create a new node, based on the template: a = document.importNode(item, true); //Add data from the array: a.textContent += myArr[i]; //append the new node wherever you like: document.body.appendChild(a); } } </script> </body> </html>