Tryit Editor v3.6

<!DOCTYPE html>
<html>
<body>
<style>
.myClass {
  color: white;
  background-color: DodgerBlue;
  padding: 20px;
  text-align: center;
  margin: 10px;
}
</style>

<h1>The template Element</h1>

<p>This example fills the web page with one new div element for each item in an array.</p>
<p>The HTML code of each div element is inside the template element.</p>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

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>

​x
 
<!DOCTYPE html><html><body><style>.myClass {  color: white;  background-color: DodgerBlue;  padding: 20px;  text-align: center;  margin: 10px;}</style>​<h1>The template Element</h1>​<p>This example fills the web page with one new div element for each item in an array.</p><p>The HTML code of each div element is inside the template element.</p>​<p>Click the button below to display the hidden content from the template element.</p>​<button onclick="showContent()">Show hidden content</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>

Save to Google Drive

Open from Google Drive

Report a Problem: