#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/the-dom/template-elements

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/the-dom/template-elements

Repovive

Template Elements - The DOM | JavaScript | Repovive

Repovive.

JavaScript22 sections · 783 units18h total

Open in Course

Template Elements

Reusable HTML templates

The <template> element holds HTML that isn't rendered until you clone and insert it.

<template id="card-template">
  <div class="card"><h2></h2><p></p></div>
</template>

const template = document.getElementById("card-template");
const clone = template.content.cloneNode(true);
clone.querySelector("h2").textContent = "Title";
container.appendChild(clone);