{"id":821,"date":"2024-07-31T07:34:02","date_gmt":"2024-07-31T05:34:02","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=821"},"modified":"2024-07-31T07:34:02","modified_gmt":"2024-07-31T05:34:02","slug":"007-dom-texto-y-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/007-dom-texto-y-html\/","title":{"rendered":"007. DOM: Texto y HTML"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a ver como interactuar tanto con el contenido textual<\/strong> como con el contenido HTML<\/strong> de un selector<\/strong> o de una etiqueta HTML<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Existen varias propiedades<\/strong> para modificar el contenido de un texto y reemplazarlo por otro.<\/p>\n\n\n\n

innerText<\/h2>\n\n\n\n

Es un propiedad que en su momento se cre\u00f3 para Internet Explorer<\/strong>, pero no es una propiedad est\u00e1ndar. Veamos un ejm.<\/p>\n\n\n\n

<h1>Texto y HTML<\/h1>\n<p id=\"que-es\">Lorem ipsum dolor, sit amet consectetur\nadipisicing elit. Enim magnam quos ipsa magni recusandae\nveritatis dolores veniam eaque vel, iure temporibus\nexplicabo! Beatae nihil odit deserunt velit mollitia nostrum placeat!<\/p>\n\n<script>\nconst $whatIsDOM = document.getElementById(\"que-es\");\nlet text = \"Hola que tal, como est\u00e1s.\";\n$whatIsDOM.innerText = text;\n<\/script><\/pre>\n\n\n\n
innerText<\/em><\/strong> sustituye el texto del p\u00e1rrafo por el de la variable<\/strong> text<\/em>. Pero importante, innerText<\/em><\/strong> no reconoce las etiquetas<\/strong> HTML<\/strong> que le pasemos como par\u00e1metro<\/strong>.<\/p>\n\n\n\n
textContent<\/h2>\n\n\n\n
La propiedad que forma parte del est\u00e1ndar para agregar contenido textual es textContent<\/em><\/strong>, donde pasa lo mismo que con innerText<\/em><\/strong>, no se reconocen las etiquetas<\/strong> HTML<\/strong> pasadas como par\u00e1metros<\/strong>, no las interpreta.<\/p>\n\n\n\n
innerHTML<\/h2>\n\n\n\n
Lo que hace es reemplazar lo que tenga ese contenido por lo que se pase como par\u00e1metro, y esta propiedad S\u00cd reconoce las etiquetas HTML<\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<h1>Texto y HTML<\/h1>\n<p id=\"que-es\">Lorem ipsum dolor, sit amet consectetur\nadipisicing elit. Enim magnam quos ipsa magni recusandae \nveritatis dolores veniam eaque vel, iure temporibus \nexplicabo! Beatae nihil odit deserunt velit mollitia nostrum placeat!<\/p>\n\n<script>\n$whatIsDOM = document.getElementById(\"que-es\");\n\nlet text = `\n<p>Hola que tal, como est\u00e1s<\/p>\n<p>Mi nombre es Francisco<\/p>\n<p>Y estamos aprendiendo <b>Javascript<\/b><\/p> \n`;\n\n$whatIsDOM.innerText = text;\n$whatIsDOM.textContent = text;\n$whatIsDOM.innerHTML = text;\n<\/script><\/pre>\n\n\n\n
Cuando usar innerHTML y cuando usar textContent<\/h2>\n\n\n\n
Cuando necesitemos insertar solo texto, utilizar textContent<\/em><\/strong>, mientras que cuando necesitemos insertar texto y c\u00f3digo HTML<\/strong>, utilizar innerHTML<\/em><\/strong>.<\/p>\n\n\n\n
outerHTML<\/h2>\n\n\n\n
Mientras que innerHTML<\/em><\/strong> reemplaza el contenido HTML<\/strong> del elemento del DOM<\/strong> del cual la hemos activado, outerHTML<\/em><\/strong> reemplaza este elemento del DOM<\/strong> por el contenido que tengamos a sustituir.<\/p>\n\n\n\n
$whatIsDOM.outerHTML = text;<\/pre>\n\n\n\n
Resumen<\/h2>\n\n\n\n
Para sustituir un texto y por otro tenemos 4 m\u00e9todos:<\/p>\n\n\n\n
    \n
  • innertext<\/em><\/strong> (depreciado)<\/li>\n\n\n\n
  • textContent<\/em><\/strong><\/li>\n\n\n\n
  • innerHTML<\/em><\/strong><\/li>\n\n\n\n
  • outerHTML<\/em><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    En este cap\u00edtulo vamos a ver como interactuar tanto con el contenido textual como con el contenido HTML de un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":6,"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-821","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 interactuar tanto con el contenido textual como con el contenido HTML de un […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/821","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=821"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/821\/revisions"}],"predecessor-version":[{"id":823,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/821\/revisions\/823"}],"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=821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}