{"id":827,"date":"2024-07-31T07:36:43","date_gmt":"2024-07-31T05:36:43","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=827"},"modified":"2024-07-31T07:36:43","modified_gmt":"2024-07-31T05:36:43","slug":"009-dom-creando-elementos-y-fragmentos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/009-dom-creando-elementos-y-fragmentos\/","title":{"rendered":"009. DOM: Creando Elementos y Fragmentos"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a ver como crear elementos<\/strong> (etiquetas HTML<\/strong>) din\u00e1micamente a trav\u00e9s de Javascript<\/strong>. Hasta ahora hemos aprendido a manipular las etiquetas existentes<\/strong> en nuestros archivos HTML<\/strong>, en este cap\u00edtulo vamos a comenzar a crear nuestras propias etiquetas din\u00e1micas<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Crear nodos uno por uno<\/h2>\n\n\n\n

El DOM<\/strong> tiene un m\u00e9todo denominado createElement()<\/em><\/strong>, que como su nombre indica, va a crear un elemento del DOM<\/strong>. En nuestro ejm vamos a crear una etiqueta <figure><\/em><\/strong> con la siguiente sintaxis.<\/p>\n\n\n\n

\/\/ Crear 3 nuevas etiquetas\nconst $figure = document.createElement(\"figure\"),\n$img = document.createElement(\"img\"),\n$figcaption = document.createElement(\"figcaption\");\n\n\/\/ Crear nuevos nodos de texto\n$figcaptionText = document.createTextNode(\"City\");<\/pre>\n\n\n\n
Despu\u00e9s de crear las 3 etiquetas<\/strong> nuevas que se unir\u00e1n a las tarjetas que est\u00e1n creadas en nuestro ejm, tenemos que configurar los atributos<\/strong> de las mismas.<\/p>\n\n\n\n
Posteriormente a ello vamos a capturar el elemento padre donde vamos a incluir la nueva tarjeta. La sintaxis es.<\/p>\n\n\n\n
$cards = document.querySelector(\".cards\");<\/pre>\n\n\n\n
Din\u00e1micamente, hasta ahora hemos creado ya las etiquetas<\/strong>, lo \u00fanico, no est\u00e1n incorporadas a\u00fan al \u00e1rbol del DOM<\/strong>. Para ello debemos irlas agregando.<\/p>\n\n\n\n
El siguiente paso es agregar las etiquetas<\/strong> al \u00e1rbol del DOM<\/strong>, para ello tenemos un m\u00e9todo llamado appendChild()<\/em><\/strong> (agregar un hijo en ingl\u00e9s) donde especificamos el nodo que queremos agregar.<\/p>\n\n\n\n
\/\/ Agregar atributos a $img\n$img.setAttribute(\"src\",\"city.jpg\");\n\n\/\/ Agregamoa a $figcaption (elemento padre) $figcaptiontext\n$figcaption.appendChild($figcaptionText);\n\n\/\/ Agregamos a $figure (elemento padre) $img y $figcaption\n$figure.appendChild($img);\n$figure.appendChild($figcaption);\n\n\/\/ Agregamos a $cards (elemento padre) $figure\n$cards.appendChild($figure);<\/pre>\n\n\n\n
Ejm completo<\/h2>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Creando elementos din\u00e1micamente<\/title>\n<style>\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<\/style>\n<\/head>\n<body>\n<h1>Creando elementos din\u00e1micamente<\/h1>\n<section class=\"cards\">\n<figure class=\"card\">\n<img src=\"tech.jpg\" alt=\"Tech\">\n<figcaption>Tech<\/figcaption>\n<\/figure>\n<figure class=\"card\">\n<img src=\"animals.avif\" alt=\"Animals\">\n<figcaption>Animals<\/figcaption>\n<\/figure>\n<figure class=\"card\">\n<img src=\"people.avif\" alt=\"People\">\n<figcaption>People<\/figcaption>\n<\/figure>\n<figure class=\"card\">\n<img src=\"arch.webp\" alt=\"Arch\">\n<figcaption>Arch<\/figcaption>\n<\/figure>\n<figure class=\"card\">\n<img src=\"nature.jpg\" alt=\"Nature\">\n<figcaption>Nature<\/figcaption>\n<\/figure>\n<\/section>\n\n<script>\n\/\/ Crear elementos\nconst $figure = document.createElement(\"figure\"),\n$img = document.createElement(\"img\"),\n$figcaption = document.createElement(\"figcaption\");\n\n\/\/ Crear nodo de texto para figcaption\n$figcaptionText = document.createTextNode(\"City\");\n\n\/\/ Capturar el elemento padre donde se incluir\u00e1 el contenido nuevo\n$cards = document.querySelector(\".cards\");\n\n\/\/ Agregar atributos a $img\n$img.setAttribute(\"src\",\"city.jpg\");\n$img.setAttribute(\"alt\",\"City\");\n\n\/\/ A\u00f1adimos la clase card\n$figure.classList.add(\"card\");\n\n\/\/ Agregar etiquetas al \u00e1rbol del DOM\n$figcaption.appendChild($figcaptionText);\n$figure.appendChild($img);\n$figure.appendChild($figcaption);\n$cards.appendChild($figure);\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
\n
Nota<\/strong>: los pasos a seguir son: primero creamos el nuevo elemento con createElement()<\/em><\/strong>, despu\u00e9s le damos valor si hemos de d\u00e1rselo con textContent<\/strong> en el caso de que sea texto plano<\/strong>, despu\u00e9s le agregamos los atributos<\/strong> mediante setAttribute()<\/strong>, despu\u00e9s le agregamos las clases<\/strong> mediante classList.add()<\/strong>, y por \u00faltimo al elemento padre le agregamos los nuevos elementos hijos mediante el m\u00e9todo appenChild()<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
Otro ejm<\/h2>\n\n\n\n
Veamos otro ejm para familiarizarnos con el uso<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
const estaciones = [\"Primavera\", \"Verano\", \"Oto\u00f1o\", \"Invierno\"];\n\n$ul = document.createElement(\"ul\");\n\ndocument.write(\"<h3>Estaciones del a\u00f1o<\/h3>\");\n\n\/\/ Agregamos al body (nodo padre) la etiqueta <ul>\ndocument.body.appendChild($ul);\n\nestaciones.forEach(el=> {\n  \/\/ Creamos las etiquetas <li>\n  const $li = document.createElement(\"li\");\n\n  \/\/ A\u00f1adimos texto a cada etiqueta <li>\n  $li.textContent = el;\n\n  \/\/ Agregamos al elemento padre ($ul) el elemento\n  \/\/ hijo ($li)\n  $ul.appendChild($li);\n});<\/pre>\n\n\n\n
Otro ejm usando template strings<\/h2>\n\n\n\n
Veamoslo con un ejm<\/p>\n\n\n\n
const dias = [\"lunes\",\"martes\"],\n$ul = document.createElement(\"ul\");\n\ndocument.write(\"Dias de la semana\");\ndocument.body.appenChild($ul);\n\n\/\/ Utilizamos innerHTML (ojo, no estamos creando un nodo)\n\/\/ Inicializamos la propiedad innerHTML con un valor nulo\n$ul.innerHTML = \"\";\ndias.forEach(el => $ul.innerHTML += <li>${el}<\/li><\/code>;<\/pre>\n\n\n\n
Renderizar varios elementos, crear fragmentos din\u00e1micos<\/h2>\n\n\n\n
En el DOM<\/strong> podemos crear fragmentos din\u00e1micos<\/strong>, que son como una variable<\/strong> que se crea din\u00e1micamente, y a ese fragmento del DOM<\/strong> le podemos estar iterando, de tal manera que en vez de estar iterando directamente al DOM<\/strong>, se lo iteramos a dicho fragmento del DOM<\/strong>, el cual est\u00e1 en memoria, no directamente en el DOM<\/strong>, y una vez tengamos todos los elementos cargados en ese fragmento<\/strong>, hacemos una sola y \u00fanica inserci\u00f3n al DOM<\/strong>, con todos los registros que nuestra petici\u00f3n haya capturado, lo que mejora el rendimiento de nuestra p\u00e1gina web. Hagamos un ejm para entenderlo.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
const meses = [\"Enero\", \"Febrero\"],\n$ul = document.createElement(\"ul\"),\n$fragment = document.createDocumentFragment();\n\nmeses.forEach(el => {\n  const $li = document.createElement(\"li\");\n  $li.textContent = el;\n\n  \/\/ Le agregamos al nodo fragmento un appenChild()\n  $fragment.appendChild($li);\n});\n\ndocument.write(\"<h3>Meses del a\u00f1o<\/h3>\");\n$ul.appendChild($fragment);\ndocument.body.appendChild($ul);<\/pre>\n\n\n\n
De esta manera hacemos una s\u00f3la inserci\u00f3n al DOM<\/strong>, y funciona perfectamente. Es una manera m\u00e1s \u00f3ptima para no pedirle tanta demanda de recursos al navegador del usuario que est\u00e1 interactuando con nuestra aplicaci\u00f3n.<\/p>\n\n\n\n
\n
Nota<\/strong>: desde ahora hay que irse acostumbrando a utilizar fragmentos<\/strong> en vez de insertar directamente nodos<\/strong> al DOM<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
Resumen<\/h2>\n\n\n\n
Los m\u00e9todos que hemos visto en este cap\u00edtulo son:<\/p>\n\n\n\n
    \n
  • createElement(\u00abetiqueta\u00bb)<\/em><\/strong>: crea un nuevo elemento<\/strong>.<\/li>\n\n\n\n
  • createTextNode(\u00abtexto\u00bb)<\/em><\/strong>: crea un nuevo nodo de texto<\/strong>.<\/li>\n\n\n\n
  • appenChild()<\/em><\/strong>: agrega elementos al \u00e1rbol del DOM<\/strong>.<\/li>\n\n\n\n
  • createDocumentFragment()<\/em><\/strong>: crea un fragmento<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    En este cap\u00edtulo vamos a ver como crear elementos (etiquetas HTML) din\u00e1micamente a trav\u00e9s de Javascript. Hasta ahora hemos aprendido […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-827","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":"En este cap\u00edtulo vamos a ver como crear elementos (etiquetas HTML) din\u00e1micamente a trav\u00e9s de Javascript. Hasta ahora hemos aprendido […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/827","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=827"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/827\/revisions"}],"predecessor-version":[{"id":829,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/827\/revisions\/829"}],"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=827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}