<template>: l'elemento "modello di contenuto"

L' elemento HTML <template> è un meccanismo per contenere l' HTML che non deve essere visualizzato immediatamente quando viene caricata una pagina, ma può essere istanziato successivamente durante il runtime utilizzando JavaScript.

Pensa a un modello come a un frammento di contenuto che viene archiviato per un uso successivo nel documento. Sebbene il parser elabori il contenuto dell'elemento <template> durante il caricamento della pagina, lo fa solo per garantire che tali contenuti siano validi; il contenuto dell'elemento, tuttavia, non viene visualizzato.

Gli attributi di questo elemento includono gli attributi globali.

Esempi

HTML

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product-Name</td>
    </tr>
  </thead>
  <tbody>
    I dati potrebbero essere inclusi qui
  </tbody>

  <template id="productrow">
    <tr>
      <td class="record"></td>
      <td></td>    
    </tr>  
  </template>

Innanzitutto, abbiamo una tabella in cui inseriremo successivamente il contenuto utilizzando il codice JavaScript. Poi arriva il template, che descrive la struttura di un frammento HTML che rappresenta una singola riga di tabella.

Ora che la tabella è stata creata e il modello definito, utilizziamo JavaScript per inserire righe nella tabella, con ogni riga costruita utilizzando il modello come base.

if ('content' in document.createElement('template')) {
  var tbody = document.querySelector("tbody");
  var template = document.querySelector("#productrow");
  var clone = template.content.cloneNone(true);
  var td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tbody.appendChild(clone);

  var clone2 = template.content.cloneNone(true);
  var td = clone2.querySelectorAll("td");
  td[0].textContent = "01538291283";
  td[1].textContent = "Other stuff";

  tbody.appendChild(clone2);
} else {
  //Trova un altro modo di aggiungere righe alla tabella
  // nel caso in cui template non è supportato
  
}

Liste utili