» » Escribir Texto Con JQuery

Escribir Texto Con JQuery

Con jQuery se pueden hacer muchísimas cosas, este vez hablaré de como escribir texto con jquery dentro de un objeto (recordemos que en javascript 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-1.10.1.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-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(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
Categorias: jQuery / Noticias / Tutorial
Añadir Comentario
Información
Usuarios que están en este grupo no pueden dejar comentarios en la página