jQuery

Agregar texto a un div con jQuery

En este tutorial aprenderemos las distintas formas de agregar texto a un div con jQuery, además incluiremos un ejemplo completo y muy sencillo.
Antes de comenzar es requisito incluir la dependencia de la librería jQuery en nuestro HTML.

¿Cómo agregar texto a un div con jQuery?

Esta tarea la podemos realizar con las siguientes funciones que nos ofrece jQuery:

.html() – Con esta función se pueden obtener y agregar textos con HTML.

.text() – Funciona igual que la función anterior pero solamente se pueden obtener y agregar textos.

.val() – Funciona solamente sobre un input para obtener y agregar textos.

.append() – Agrega al contenido existente texto con HTML.

En el siguiente ejemplo podemos ver como utilizar la funciones mencionadas:

<!DOCTYPE html>
<html>
  <head>
    <title>Agregar texto a un div con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <div id="html"></div>
    <div id="text"></div>
    <input id="val" type="text">
    <div id="append">Ejemplo con </div>
    <script>
      $(function() {
        $('#html').html('<strong>Ejemplo con html()</strong>');
        $('#text').text('Ejemplo con text()');
        $('#val').val('Ejemplo con val()');
        $('#append').append('append()');
      });
    </script>
  </body>
</html>

Espero que les sea de gran utilidad este sencillo tutorial en el cual se explica cómo agregar texto a un div con jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *