innerText e innerHTML son propiedades de JavaScript. Sin embargo, existen diferencias en el manejo del texto. Verifiquemos la sintaxis de los dos y luego tomemos un ejemplo para ver las diferencias.
Sintaxis:
Supongamos que tenemos una variable de JavaScript llamada x.
var x = document.getElementById('test');
- textointerno
x.innerText
- HTML interno
x.innerHTML
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
Difference between
InnerHTML and InnerText
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<div id="test">
The following element contains some
<codes>code</codes> and
<italic>some text</italic>.
</div>
<p></p>
<button onClick="innerHTMLFn()">
innerHTML
</button>
<button onClick="innerTextFn()">
innerText
</button>
<p id="op"></p>
<script>
function innerTextFn() {
var x = document.getElementById('test');
alert(x.innerText);
}
function innerHTMLFn() {
var x = document.getElementById('test');
alert(x.innerHTML);
}
</script>
</body>
</html>
Producción
Antes de hacer clic:
Después de hacer clic en HTML interior:
Después de hacer clic en texto interior:
Diferencias:
Como podemos ver en el ejemplo anterior, la propiedad innerText establece o devuelve el contenido de texto como texto sin formato del Node especificado y todos sus descendientes, mientras que la propiedad innerHTML obtiene y establece el texto sin formato o el contenido HTML en los elementos. A diferencia de innerText, el HTML interno le permite trabajar con texto enriquecido HTML y no codifica ni decodifica automáticamente el texto.