HTML Template Demo

HTML 5 Vanila Web Component - Template Demo

by Jitendra Zaa

HTML

<div style="height:300px">
  <h1> Template Demo </h1>

  <template id="tmpTopMovies">
  <h3> Movie Name </h3>
  <p> Description </p>
</template>

  <div id="tmpPlaceholder"></div>
</div>

CSS

body {
  height: 300px;
}

JavaScript

let movies = [{
      name: "Lord of Rings",
      detail: "A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron."
    },
    {
      name: "Star Wars - IV",
      detail: "Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a Wookiee and two droids to save the galaxy from the Empire's world-destroying battle station, while also attempting to rescue Princess Leia from the mysterious Darth Vader."
    },
  ];

  let t = document.querySelector('#tmpTopMovies');
  let pholder = document.querySelector('#tmpPlaceholder');

  for (i in movies) {
    t.content.querySelector('h3').innerText = movies[i].name;
    t.content.querySelector('p').innerText = movies[i].detail;
    let clone = document.importNode(t.content, true);
    pholder.appendChild(clone);
  }