Inicia sesión


Con jQuery se pueden hacer muchísimas cosas, este vez hablaré de como escribir texto con jquery dentro de un objeto (recordemos que en 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-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/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

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2016-02-07
  • Categorias: jQuery Noticias Tutorial

Escribir Texto Con JQuery Escribir Texto Con JQuery...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial