1

Quisiera saber la diferencia entre innerHTML, outerHTML como así también innerText y outerText dentro de javascript

1
  • 3
    Hola Pachi. ¿Has mirado la documentacion de las propiedades que indicas para entenderlas mejor? ¿Que problemas tuviste tras leerlo? Mira Cómo preguntar para mejorar tu pregunta. Un saludo
    – lois6b
    Commented el 26 dic. 2017 a las 9:10

2 respuestas 2

9

Diferencia entre innerHTML y outerHTML

innerHTML devuelve el texto contenido en las etiquetas html.

outerHTML devuelve el texto contenido en las etiquetas html y las propias etiquetas.

Ejemplo

<body>
		
<span id="span">soy un span</span>   

<script>
    var valor = document.getElementById("span");
    alert(valor.innerHTML); //Muestra "soy un span"
    alert(valor.outerHTML); //Muestra "<span id="span">soy un span</span>"
</script>
</body>

Diferencia entre innerText y outerText

innerText devuelve el texto que se encuentra en las etiquetas html.

outerText devuelve el texto contenido en las etiquetas incluidas las etiquetas.

¿Cúal es por tanto la diferencia entre innerHTML y innerText?

innerText es interpretado como texto plano mientras que innerHTML es interpretado en formato html, para que te quede claro te pondré este ejemplo:

Ejemplo

<head>
<script type="text/javascript">
<!--
function Process(val){
    var obj = document.getElementById("div_1");
     if(val==1){
         obj.innerText = "<h4 style='color:blue;'>Algún Texto</h4>";
     }else{
         obj.innerHTML = "<h4 style='color:blue;'>Algún Texto</h4>";
     }
}
//-->
</script>
</head>
<body class="body">
    <div id="div_1">
    </div>
    <form id="form1" action="" onsubmit="">
        <input type="text" name="t1"/>
    	  <input type="button" value="innerText" onclick="Process(1)"/>
        <input type="button" value="innerHTML" onclick="Process(2)"/>
    </form>
</body>

1
  • Cuando dices mientras que innerHTML es interpretado en formato html, esto no es así, el innerHTML es también un texto plano, lo que pasa es que al agregarlo dentro del div pasa a ser en formato HTML.
    – user13558
    Commented el 11 feb. 2020 a las 17:03
1

Pongamos el código HTML siguiente:

<div id="uno"><strong>Esto</strong> es un <a href="/">Ejemplo</a></div>
  • innerHTML del elemento #id nos devolvería el html interior de la etiqueta:

    <strong>Esto</strong> es un <a href="/">Ejemplo</a>
    
  • outerHTML del mismo nos devolvería el HTML completo del elemento:

    <div id="uno"><strong>Esto</strong> es un <a href="/">Ejemplo</a></div>
    
  • innerText nos devolvería el /texto/ interior del elemento:

    Esto es un ejemplo
    
  • outerText no es un atributo estándar, pero habitualmente nos devolvería el texto interior (como innerText). La diferencia es que, si se le asigna algo, reemplazará todo el elemento en vez de sólo su contenido.

Espero que te haya servido de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.