freeCodeCamp/guide/spanish/javascript/html-dom-innerhtml-property/index.md

title, localeTitle

title	localeTitle
HTML Dom Innerhtml Property	HTML Dom Innerhtml Propiedad

HTML Dom Innerhtml Propiedad

La propuesta innerHTML devuelve el contenido HTML dentro de un elemento seleccionado y también le permite definir un nuevo contenido HTML.

OBTENER CONTENIDO DE ELEMENTOS

<div id="demo"> 
  <p>Demo</p> 
 </div> 

var element = document.getElementById("demo"); 
 console.log(element.innerHTML) //logs <p>Demo</p> 

SET ELEMENTO CONTENIDO

<div id="demo"></div> 

var element = document.getElementById("demo"); 
 element.innerHTML = "<div>Demo</div>"; 

El HTML ahora será como

<div id="demo"> 
  <div>Demo</div> 
 </div> 

CONSIDERACIONES DE SEGURIDAD

El valor establecido en innerHTML debe provenir de fuentes confiables, ya que Javascript colocará cualquier elemento dentro de ese elemento y se ejecutará como HTML simple.

Ejemplo:

Al establecer un valor de " <script>alert();</script> " se activará la función Javascript "alert ()":

var element = document.getElementById("demo"); 
 
 element.innerHTML = "<script>alert();</script>"; 

Este tipo de ataque se llama Cross Site Scripting, o XSS para abreviar .

Esta es una de las formas más comunes de cometer un ataque XSS. Si quieres aprender un poco más y aprender a defenderte, echa un vistazo a este recurso