Quisiera saber la diferencia entre innerHTML
, outerHTML
como así también innerText
y outerText
dentro de javascript
-
3Hola 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– lois6bCommented el 26 dic. 2017 a las 9:10
2 respuestas
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>
-
Cuando dices mientras que
innerHTML
es interpretado en formato html, esto no es así, elinnerHTML
es también un texto plano, lo que pasa es que al agregarlo dentro deldiv
pasa a ser en formato HTML.– user13558Commented el 11 feb. 2020 a las 17:03
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.