{"id":836,"date":"2024-07-31T07:40:51","date_gmt":"2024-07-31T05:40:51","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=836"},"modified":"2024-07-31T07:40:51","modified_gmt":"2024-07-31T05:40:51","slug":"012-dom-modificando-elementos-cool-style","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/012-dom-modificando-elementos-cool-style\/","title":{"rendered":"012. DOM: Modificando Elementos (Cool Style)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En el cap\u00edtulo anterior vimos los m\u00e9todos que tenemos para poder insertar no s\u00f3lo en la parte final del elemento que tengamos como referencia, sino reemplazar elementos, insertar antes de cierto elemento, eliminar elementos y clonar elementos. Estos son los <strong>m\u00e9todos<\/strong> que han existido desde siempre, sin embargo con el avance del est\u00e1ndar han aparecido nuevos m\u00e9todos, que resuelven de manera m\u00e1s f\u00e1cil la inserci\u00f3n de elementos donde lo necesitemos.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Existen 3 m\u00e9todos nuevos, denominados <strong>Insert Adjacent<\/strong> (inserta de manera adyacente), que son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>insertAdjacentElement(position, el)<\/em><\/strong>: viene a ser como un <strong><em>appenChild()<\/em><\/strong> o como un <strong><em>insertBefore()<\/em><\/strong>, agrega un <strong>elemento HTML<\/strong>.<\/li>\n\n\n\n<li><strong><em>insertAdjacentHTML(position, html)<\/em><\/strong>: viene a ser como un <strong><em>innerHTML()<\/em><\/strong>, agrega <strong>contenido HTML<\/strong>.<\/li>\n\n\n\n<li><strong><em>insertAdjacentText(position, text)<\/em><\/strong>: viene a ser como un <strong>textContent<\/strong>, inserta texto plano.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Como podemos ver, reciben dos par\u00e1metros, el primero es la <strong>posici\u00f3n<\/strong>, y el segundo par\u00e1metro es el elemento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y las posiciones donde podemos colocarlos son 4, que son las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>beforebegin<\/em><\/strong>: hermano anterior<\/li>\n\n\n\n<li><strong>afterbegin<\/strong>: primer hijo<\/li>\n\n\n\n<li><strong>beforeend<\/strong>: ultimo hijo<\/li>\n\n\n\n<li><strong>afterend<\/strong>: hermano siguiente<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Trabajemos con estos elementos haciendo una serie de ejms.<\/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;Cool Style&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;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n}\n\n.rotate-45 {\ntransform: rotate(45deg);\n}\n\nimg {\nwidth: 250px;\nheight: 300px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Creando elementos din\u00e1micamente (Cool Style)&lt;\/h1&gt;\n&lt;section class=\"cards\"&gt;\n&lt;figure class=\"card\"&gt;\n&lt;img src=\"tech.jpg\" alt=\"Tech\"&gt;\n&lt;figcaption&gt;Tech&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n&lt;figure class=\"card\"&gt;\n&lt;img src=\"animals.avif\" alt=\"Animals\"&gt;\n&lt;figcaption&gt;Animals&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n&lt;figure class=\"card\"&gt;\n&lt;img src=\"people.avif\" alt=\"People\"&gt;\n&lt;figcaption&gt;People&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n&lt;figure class=\"card\"&gt;\n&lt;img src=\"arch.webp\" alt=\"Arch\"&gt;\n&lt;figcaption&gt;Arch&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n&lt;figure class=\"card\"&gt;\n&lt;img src=\"nature.jpg\" alt=\"Nature\"&gt;\n&lt;figcaption&gt;Nature&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n&lt;\/section&gt;\n\n&lt;script&gt;\nconst $cards = document.querySelector(\".cards\"),\n$newCard = document.createElement(\"figure\");\n\nlet $contentCard = `\n&lt;img src=\"tech.jpg\" alt=\"Tech\" \/&gt;\n&lt;figcaption&gt;&lt;\/figcaption&gt;\n`;\n\n$newCard.classList.add(\"card\");\n\n\/\/ Incluir contenido nuevo\n$newCard.insertAdjacentHTML(\"afterbegin\", $contentCard);\n\/\/ Incluir texto nuevo\n$newCard.querySelector(\"figcaption\").insertAdjacentText(\"beforeend\", \"Hola\");\n\/\/ Incluir un elemento nuevo\n$cards.insertAdjacentElement(\"afterbegin\", $newCard);\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se puede seguir utilizando sin problema el viejo estilo, o bien elegir utilizar este nuevo estilo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adicionalmente a estos m\u00e9todos, jQuery ten\u00eda unos m\u00e9todos denominados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em><strong>before<\/strong><\/em>: hermano primero<\/li>\n\n\n\n<li><em><strong>after<\/strong><\/em>: hermano \u00faltimo<\/li>\n\n\n\n<li><em><strong>prepend<\/strong><\/em>: hijo primero<\/li>\n\n\n\n<li><em><strong>append<\/strong><\/em>: hijo \u00faltimo<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">que hacen lo mismo que las posiciones <strong><em>beforebegin<\/em><\/strong>, <strong><em>afterbegin<\/em><\/strong>, <strong><em>beforeend<\/em><\/strong> y <strong><em>afterend<\/em><\/strong>. Desde hace un tiempo, <strong>Javascript<\/strong> estos m\u00e9todos los tiene activos<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En resumen, como podemos ver, tenemos un abanico de opciones que tenemos para insertar elementos al DOM.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>De manera tradicional\n<ul class=\"wp-block-list\">\n<li>textContent<\/li>\n\n\n\n<li>innerHTML<\/li>\n\n\n\n<li>insertBefore<\/li>\n\n\n\n<li>appendChild<\/li>\n\n\n\n<li>removeChild<\/li>\n\n\n\n<li>replaceChild<\/li>\n\n\n\n<li>cloneNode<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Con las nuevas maneras\n<ul class=\"wp-block-list\">\n<li>insertAdjacentText<\/li>\n\n\n\n<li>insertAdjacentHTML<\/li>\n\n\n\n<li>insertAdjacentElement<\/li>\n\n\n\n<li>prepend<\/li>\n\n\n\n<li>append<\/li>\n\n\n\n<li>before<\/li>\n\n\n\n<li>after<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Posiciones de los nuevos m\u00e9todos\n<ul class=\"wp-block-list\">\n<li>beforebegin<\/li>\n\n\n\n<li>afterbegin<\/li>\n\n\n\n<li>beforeend<\/li>\n\n\n\n<li>afterend<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En el cap\u00edtulo anterior vimos los m\u00e9todos que tenemos para poder insertar no s\u00f3lo en la parte final del elemento que tengamos&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-836","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 el cap\u00edtulo anterior vimos los m\u00e9todos que tenemos para poder insertar no s\u00f3lo en la parte final del elemento que tengamos...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/836","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=836"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/836\/revisions"}],"predecessor-version":[{"id":838,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/836\/revisions\/838"}],"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=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}