{"id":830,"date":"2024-07-31T07:37:46","date_gmt":"2024-07-31T05:37:46","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=830"},"modified":"2024-07-31T07:37:46","modified_gmt":"2024-07-31T05:37:46","slug":"010-dom-templates-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/010-dom-templates-html\/","title":{"rendered":"010. DOM: Templates HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A partir de <strong>HTML5<\/strong> existe una etiqueta nueva est\u00e1ndar que son los <strong>templates<\/strong>. La etiqueta <strong><em>&lt;template&gt;<\/em><\/strong> es como un modelo a seguir en el cual estructuramos el contenido <strong>HTML<\/strong> que queramos que mediante <strong>Javascript<\/strong> se convierta en din\u00e1mico, por lo que es otra forma que se nos brinda de poder interactuar con el <strong>DOM<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo veremos como trabajar con esta etiqueta junto con los <strong>fragmentos<\/strong> del <strong>DOM<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La etiqueta <strong><em>&lt;template&gt;<\/em><\/strong> es una etiqueta que no se visualiza, lo que vamos a incluir es el c\u00f3digo <strong>HTML<\/strong> que necesitemos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamosolo con un ejm.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;title&gt;Templates&lt;\/title&gt;\n&lt;style&gt;\n:root {\n--yellow-color: #f7df1e;\n--dark-color: #222;\n}\n\n.cards {\nborder: thin solid var(--dark-color);\npadding: 1rem;\n}\n\n.card {\ndisplay: inline-block;\nbackground-color: var(--dark-color);\ncolor: var(--yellow-color)\n}\n\n.card figcaption {\npadding: 1rem;\n}\n\n.rotate-45 {\ntransform: rotate(45deg);\n}\n\nimg {\nwidth: 20px;\nheight: 300px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;h1&gt;Templates&lt;\/h1&gt;\n  &lt;section class=\"cards\"&gt;\n    &lt;template id=\"template-card\"&gt;\n      &lt;figure class=\"card\"&gt;\n        &lt;img&gt;\n        &lt;figcaption&gt;&lt;\/figcaption&gt;\n      &lt;\/figure&gt;\n    &lt;\/template&gt;\n  &lt;\/section&gt;\n\n&lt;script&gt;\n\/\/ Creamos las variables necesarias\nconst $cards = document.querySelector(\".cards\"),\n$template = document.getElementById(\"template-card\").content,\n$fragment = document.createDocumentFragment(),\ncardContent = [\n  {\n    title: \"Tecnolog\u00eda\",\n    img: \"tech.jpg\",\n  },\n  {\n    title: \"Animales\",\n   img: \"animals.avif\",\n  }\n]\n\ncardContent.forEach(el =&gt; {\n$template.querySelector(\"img\").setAttribute(\"src\", el.img);\n$template.querySelector(\"img\").setAttribute(\"alt\", el.title);\n$template.querySelector(\"figcaption\").textContent = el.title;\n\n\/* Clonamos el template, de lo contrario\nsolo imprimir\u00eda uno *\/\nlet $clone = document.importNode($template, true);\n\n$fragment.appendChild($clone);\n});\n\n$cards.appendChild($fragment);\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A partir de HTML5 existe una etiqueta nueva est\u00e1ndar que son los templates. La etiqueta &lt;template&gt; es como un modelo a seguir&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-830","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"A partir de HTML5 existe una etiqueta nueva est\u00e1ndar que son los templates. La etiqueta &lt;template&gt; es como un modelo a seguir...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/830\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/830\/revisions\/832"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/800"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}