Conceptos de DHTML

La propiedad innerText nos permite cambiar el contenido de texto de un elemento de texto o consultar su valor.

A diferencia de innerHTML si le asignamos un string que contiene en su interior etiquetas HTML, luego no se generan nodos en el DOM sino se muestran dichos caracteres en la página.

Veamos de mostrar un título y mediante un botón proceder a cambiar su contenido y otro botón que extraiga el texto del mismo.

pagina1.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <h1 id="titulo1">Título original.</h1>
    <input type="button" value="Cambiar título" onclick="cambiarTitulo()">
    <input type="button" value="Recuperar contenido del título" onclick="recuperarTitulo()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function cambiarTitulo() {
    let tit = document.getElementById("titulo1")
    tit.innerText = "Nuevo título"
}

function recuperarTitulo() {
    alert(document.getElementById("titulo1").innerText)
}

En la función para cambiar el título procedemos a recuperar la referencia del nodo que contiene el título:

    let tit = document.getElementById("titulo1")

Luego le asignamos el nuevo string que debe mostrar la etiqueta:

    tit.innerText = "Nuevo título"

Es importante hacer notar que si le asignamos un string con etiquetas HTML, las mismas se muestran y no se procesan:

    tit.innerText = "Nuevo título fuerte"

Si queremos que se cree el nodo elemento 'strong' debemos utilizar la propiedad innerHTML.

Para recuperar el texto del título lo hacemos mediante el código:

    alert(document.getElementById("titulo1").innerText)

22 - Propiedad innerText

Retornar