Obtener el texto de un elemento en JavaScript
En el siguiente tutorial aprenderemos cómo obtener el texto de un elemento en JavaScript, es decir, acceder al contenido textual de un elmento y obtener su valor.
Obtener el texto de un elemento con innerText
El método innerText extrae el texto de un elemento. Veamos un ejemplo
Ejemplo
<!--Elemento html-->
<p id="titulo">Título del libro</p>
<script>
// Vamos obtener el texto del párrafo
var textoTitulo = document.getElementById('titulo').innerText;
// textoTitulo vale "Título del libro"
</script>
Obtener el texto de un elemento con textContent
También podemos utilizar el método textContent para obtener el texto. Veamos un ejemplo
Ejemplo
<!--Elemento html-->
<p id="titulo">Título del libro</p>
<script>
// Vamos obtener el texto del párrafo
var textoTitulo = document.getElementById('titulo').textContent;
</script>
Añadir texto a un elemento
Los métodos innerText y textContent también se pueden utilizar para añadir texto a un elemento. Veamos un ejemplo
Ejemplo
<!--Elemento html-->
<p id="titulo1"></p>
<p id="contenido"></p>
<script>
// Añadimos texto al párrafo
document.getElementById('titulo').innerText = "Título del libro";
// También podemos usar el otro método
document.getElementById('contenido').textContent = "Contenido del libro";
</script>
Añadir contenido a un elemento con innerHtml
El método innerHtml permite añadir contenido html a un elemento. Lo podremos hacer de la siguiente forma
Ejemplo
<!--Elemento html-->
<p id="titulo"></p>
<script>
// Añadimos el contenido html
document.getElementById('titulo').innerHtml = "<h3>Parte 1</h3><p class='section-title'>Esta es la primera parte</p>";
</script>