Template Literals example: For loops

template-literals-3-for-loops.js

/* 
  Template literals for-loop example
  Using `Array(5).join(0).split(0)`, we create an empty array 
  with 5 items which we can iterate through using `.map()`
*/

var element = document.createElement('div')
element.innerHTML = `
  <h1>This element is looping</h1>
  ${Array(5).join(0).split(0).map((item, i) => `
    <div>I am item number ${i}.</div>
  `).join('')}
`
/*
  Results:
    <div>
      <h1>This element is looping</h1>
      <div>I am item number 0.</div>
      <div>I am item number 1.</div>
      <div>I am item number 2.</div>
      <div>I am item number 3.</div>
      <div>I am item number 4.</div>
    </div>
*/