textContent e innerHTML son propiedades de JavaScript. Sin embargo, existen diferencias en la forma en que se maneja el texto especificado en JavaScript. Echemos un vistazo a la sintaxis de ambas propiedades.
Sintaxis:
Deje que elem sea una variable de JavaScript que contiene un elemento que se selecciona de la página.
let elem = document.getElementById('test-btn');
Las propiedades textContent e innerHTML se pueden usar de la siguiente manera:
- La propiedad textContent: esta propiedad se utiliza para obtener o establecer el contenido de texto del Node especificado y sus descendientes.
elem.textContent
- La propiedad innerHTML: esta propiedad se utiliza para obtener o establecer el contenido HTML de un elemento.
elem.innerHTML
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:#006600">
GeeksforGeeks
</h1>
<div id="test-btn">
The following element contains some
<bold>bold</bold> and
some <italic>italic text</italic>.
</div>
<p></p>
<button onClick="innerHTMLfn()">
innerHTML
</button>
<button onClick="textContentfn()">
textContent
</button>
<p id="demo-para"></p>
<script>
function textContentfn() {
var elem =
document.getElementById('test-btn');
alert(elem.textContent);
}
function innerHTMLfn() {
var elem =
document.getElementById('test-btn');
alert(elem.innerHTML);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier botón:
- Después de hacer clic en el botón innerHTML:
- Después de hacer clic en el botón textContent:
Diferencias: como podemos ver en el ejemplo anterior, la propiedad innerHTML obtiene o establece el contenido HTML del elemento. textContent no codifica ni decodifica automáticamente el texto y, por lo tanto, nos permite trabajar solo con la parte de contenido del elemento.
Publicación traducida automáticamente
Artículo escrito por mharshita31 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA