4z3o1d

Con jаvascript todo es un objeto).

Se utiliza la función .text();

Que en si consiste en que, si a un objeto le escribes esa función sin parámetros, te devolverá el texto que se encuentra dentro de él, mas sin embargo si le asignamos un parámetro, reemplazará el texto que contenga ese objeto por el nuevo texto que se le asigne como parámetro.

Por ejemplo:

Tenemos un div con una id "divcontexto”, en el cual se encuentra dentro de ella el texto "Soy el texto original del objeto”.

<div id="divcontexto">Soy el texto original del objeto</div> 

En seguida se encuentran dos botones: uno con la id "leer”; el otro con la id "reemplazar”

<input id="leer" type="button" value="Lee texto">
<input id="reemplazar" type="button" value="Reemplaza texto">

Nuevamente, necesitamos vincula el archivo jquery a nuestro documento.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

Ahora, la acción del objeto botón con la id "leer” obtendrá todo el texto del div que acabamos de crear. Recordemos que ese div tiene la id "divcontexto”

$("#leer").click(function (){
    var texto = $("#divcontexto").text();
    alert(texto);
});

Nótese que la función .text() no lleva parámetros (lo que significa que obtendrá el texto), y se guardo en una variable para en seguida mostrarla en una alerta.

 

Y para el otro botón.

$("#reemplazar").click(function (){
    $("#divcontexto").text("Soy el nuevo texto");
});

En esta ocasión si que se le escribió un parámetros a la función .text() (o sea, remplazara el texto anterior por el parámetro).

El código completo seria:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Incluye texto con jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/jаvascript">
        $(document).ready(function (){
            $("#leer").click(function (){
                var texto = $("#divcontexto").text();
                alert(texto);
            });
            $("#reemplazar").click(function (){
                $("#divcontexto").text("Soy el nuevo texto");
            });
        });
    </script>
</head>
<body>
<div id="divcontexto">Soy el texto original del objeto</div>
<input id="leer" type="button" value="Lee texto">
<input id="reemplazar" type="button" value="Reemplaza texto">
</body>
</html>

Ver Resultado

Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas...