path: root/files/ca/web/html/element/template/index.html

---
title: <template>
slug: Web/HTML/Element/template
tags:
  - Element
  - HTML
  - Reference
  - Web
  - Web Components
translation_of: Web/HTML/Element/template
---
<h2 id="Summary" name="Summary">Sumari</h2>

<p>L'<strong>element</strong><span class="seoSummary"> <strong><a href="/en-US/docs/Web/HTML">HTML</a></strong></span> <strong>plantilla <code>&lt;template&gt;</code></strong> és un mecanisme per mantenir el contingut del costat del client que no es renderizará quan es carregui una pàgina, però posteriorment es instanciará durant el temps d'execució mitjançant Javascript.<span class="seoSummary"> </span></p>

<p>Penseu en una plantilla com un fragment de contingut que s'emmagatzema per al seu ús posterior en el document. Mentre que l'analitzador fa processar el contingut de l'element <code>&lt;template&gt;</code> durant la càrrega de la pàgina, ho fa només per assegurar-se que aquests continguts són vàlids; No obstant això, el contingut de l'element no es representa.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Contingut metadata</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contingut dinàmic</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">contingut textual</a>, element de suport script</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Contingut metadata</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contingut dinàmic, </a> <span id="result_box" lang="ca"><span>qualsevol</span> <span>contingut</span> <span>HTML</span> <span>vàlid que</span> <span>es</span> <span>permet</span> <span>que passi</span> <span>dins dels elements</span></span> {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} i {{HTMLElement("menu")}} <span id="result_box" lang="ca"><span>l'atribut</span> <span><code>type</code> és</span> <span>en l'estat de</span> <span>menú</span> <span>emergent</span></span></td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} and {{HTMLElement("colgroup")}} sense un atribut <code>span</code></td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLTemplateElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<p>També hi ha un atribut <code>content</code>, que és de només lectura i proporciona l'accés als continguts de la plantilla. L'existència de l'atribut <code>content</code> s'utilitza sovint com una manera de determinar si el navegador de l'usuari suporta l'element <strong><code>&lt;template&gt;</code></strong>.</p>

<h2 id="Example" name="Example">Exemple</h2>

<p>Primer començarem amb la part HTML de l'exemple.</p>

<pre class="brush: html">&lt;table id="producttable"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;UPC_Code&lt;/td&gt;
      &lt;td&gt;Product_Name&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;!-- existing data could optionally be included here --&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;template id="productrow"&gt;
  &lt;tr&gt;
    &lt;td class="record"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/template&gt;
</pre>

<p>En primer lloc, tenim una taula en la qual més endavant inserirem el contingut mitjançant codi JavaScript. Després ve la plantilla, que descriu l'estructura d'un fragment d'HTML que representa una sola fila de la taula.</p>

<p>Ara que la taula s'ha creat i la plantilla definida, fem servir JavaScript per a inserir files a la taula, amb cada fila construïda usant la plantilla com a base.</p>

<pre class="brush:js;">// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

  // Instantiate the table with the existing HTML tbody and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}
</pre>

<p>El resultat és la taula HTML original, amb dues noves files afegides a través de JavaScript:</p>

<div class="hidden">
<pre class="brush: css">table {
  background: #000;
}
table td {
  background: #fff;
}</pre>
</div>

<p>{{EmbedLiveSample("Example", 500, 120)}}</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Cap canvi</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>26</td>
   <td>{{CompatGeckoDesktop("22")}}</td>
   <td>Edge 13</td>
   <td>15</td>
   <td>7.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>iOS 8</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Veure</h2>

<ul>
 <li>Components Web : {{HTMLElement("content")}}, {{HTMLElement("shadow")}}</li>
</ul>

<div>{{HTMLRef}}</div>