Las propiedades DOM de HTML interno y HTML externo le permiten leer y escribir contenido en una página web. Puede usarlos para buscar marcado o realizar cambios en él, y los dos son similares en muchos aspectos. Pero hay una diferencia significativa.
Cuando trabaje con el DOM, utilizará el HTML interno y el HTML externo de manera bastante diferente. Descubra cómo usar estas dos propiedades con ejemplos prácticos.
¿Qué es HTML interno?
La propiedad innerHTML es parte de el DOM y puede acceder a él a través de JavaScript. Puede usarlo para obtener o establecer el contenido de un elemento. Este contenido excluye la etiqueta propia del elemento y solo incluye el marcado que representa a los elementos secundarios del elemento, en forma de cadena.
Considere este ejemplo de código:
<html><cuerpo>
<pagidentificación="Mi p">Soy un párrafo.pag>
<guion>
documento.getElementById("Mi p").innerHTML = "Hola Mundo";
guion>
cuerpo>
html>
En su navegador, verá un párrafo estándar con el texto de reemplazo, así:
La propiedad innerHTML selecciona y cambia el contenido delelemento en este ejemplo.
¿Qué es HTML externo?
La propiedad outsideHTML es como innerHTML en muchos sentidos. Puede usarlo para obtener o establecer el contenido de un elemento seleccionado. Sin embargo, también establece el marcado que representa el elemento en sí. Esto incluye la etiqueta de apertura, cualquier propiedad y, cuando corresponda, la etiqueta de cierre.
Vuelva a consultar el ejemplo anterior para ver en qué se diferencia el HTML externo:
<html><cuerpo>
<pagidentificación="Mi p">Soy un párrafo.pag><guion>
documento.getElementById("Mi p").outerHTML = "Este H1 reemplazó un párrafo.
"
guion>
cuerpo>
html>
En su navegador, debería ver algo como esto:
En este ejemplo, la propiedad HTML exterior cambia el pag elemento en un h1 elemento.
Conozca la diferencia y cuándo usar estas propiedades
Las propiedades DOM de HTML interno y HTML externo tienen muchas similitudes, pero una diferencia clave. La propiedad innerHTML captura el contenido HTML de un elemento. Por el contrario, la propiedad outsideHTML captura el HTML que representa el propio elemento y su contenido.
Puede usar estas propiedades para leer y escribir contenido HTML a través del DOM. El DOM será un concepto común e importante a lo largo de su proceso de desarrollo de JavaScript.
