Horje

How to fill the web page with one new div element on HTML <template> Tag

Fill the web page with one new div element for each item in an array. The HTML code of each div element is inside the template element.

index.html
Example: HTML
 <template>
  <div class="myClass">I like: </div>
</template>

<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  let temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  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> 

Output should be:

How to fill the web page with one new div element on HTML <template> Tag




Type:
html
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded by:
Admin