La propiedad innerHTML es parte del Modelo de objetos de documento (DOM) que se utiliza para establecer o devolver el contenido HTML de un elemento. Donde el valor de retorno representa el contenido de texto del elemento HTML. Permite que el código JavaScript manipule un sitio web que se muestra. Más específicamente, establece o devuelve el contenido HTML (el HTML interno) de un elemento. La propiedad innerHTML se usa ampliamente para modificar el contenido de una página web, ya que es la forma más fácil de modificar DOM. Pero hay algunas desventajas al usar innerHTML en JavaScript.
Desventajas de usar la propiedad innerHTML en JavaScript:
- El uso de innerHTML es muy lento: el proceso de uso de innerHTML es mucho más lento ya que su contenido se construye lentamente, también los contenidos y elementos ya analizados también se vuelven a analizar, lo que lleva tiempo.
- Conserva los controladores de eventos adjuntos a cualquier elemento DOM: los controladores de eventos no se adjuntan a los nuevos elementos creados mediante la configuración de innerHTML automáticamente. Para hacerlo, se debe realizar un seguimiento de los controladores de eventos y adjuntarlos manualmente a los nuevos elementos. Esto puede causar una pérdida de memoria en algunos navegadores.
- El contenido se reemplaza en todas partes: ya sea que agregue, agregue, elimine o modifique el contenido en una página web usando innerHTML, todo el contenido se reemplaza, también todos los Nodes DOM dentro de ese elemento se vuelven a analizar y recrear.
- No se admite agregar a HTML interno: por lo general, += se usa para agregar en JavaScript. Pero al agregar a una etiqueta Html usando innerHTML, se vuelve a analizar toda la etiqueta.
Ejemplo:
<p id="geek">Geeks</p> title = document.getElementById('#geek') // The whole "geek" tag is reparsed title.innerHTML += '<p> forGeeks </p>' - Problema de reemplazo de contenido anterior : el contenido anterior se reemplaza incluso si se usa object.innerHTML = object.innerHTML + ‘html’ en lugar de object.innerHTML += ‘html’. No hay forma de agregar sin volver a analizar todo el HTML interno. Por lo tanto, trabajar con innerHTML se vuelve muy lento. La concatenación de strings simplemente no se escala cuando es necesario crear elementos DOM dinámicos, ya que las aperturas y cierres de cotizaciones se vuelven difíciles de rastrear.
- Puede romper el documento: innerHTML no proporciona una validación adecuada, por lo que se puede usar cualquier código HTML válido. Esto puede romper el documento de JavaScript. Incluso se puede utilizar HTML roto, lo que puede provocar problemas inesperados.
- También se puede usar para Cross-site Scripting (XSS): el hecho de que innerHTML pueda agregar texto y elementos a la página web, puede ser usado fácilmente por usuarios maliciosos para manipular y mostrar elementos no deseados o dañinos dentro de otras etiquetas de elementos HTML. Cross-site Scripting también puede conducir a la pérdida, fuga y cambio de información confidencial.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Using innerHTML in JavaScript
</title>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<p id="P">
A computer science
portal for geeks.
</p>
<button onclick="geek()">
Try it
</button>
<p id="p"></p>
<script>
function geek() {
var x = document.getElementById("P")
.innerHTML;
document.getElementById("p")
.innerHTML = x;
document.getElementById("p")
.style.color = "green";
}
</script>
</body>
</html>
Producción: