Cómo reemplazar HTML en un DIV con jQuery

Escrito por gareth downes-powell | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo reemplazar HTML en un DIV con jQuery
Cómo reemplazar HTML en un DIV con jQuery. (Polka Dot RF/Polka Dot/Getty Images)

jQuery, una biblioteca JavaScript de código abierto, es utilizado por un gran número de sitios web para añadir interactividad del usuario y mejorar la experiencia del visitante. Hace que sea fácil las secuencias de comandos complejas de interacciones AJAX, animaciones y componentes con una cantidad mínima de código. Puedes hacer referencia a los elementos de la página utilizando su identificador de HTML, lo que te permite hacer referencia al elemento y cambiar el código o las propiedades HTML. Utiliza los eventos para responder a las acciones del usuario, como un clic del botón, y ejecuta un código predefinido para dar una respuesta a la acción, como la sustitución del HTML en un DIV.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre una aplicación de desarrollo web o un editor de texto y crea una nueva página HTML.

  2. 2

    Añade la biblioteca jQuery a la página agregando el código HTML correspondiente entre las etiquetas "<head>" "</head>". Por ejemplo:

    <script type="text/javascript" src="/jquery/jquery-1.6.1.min.js"></script>

    Cambia la ruta en el atributo "src" para que coincida con la ubicación y la versión de la biblioteca descargada desde el sitio web de jQuery.

  3. 3

    Escribe el siguiente código para añadir un div HTML a la página con un texto de ejemplo. Esto se debe agregar entre las etiquetas "<body>" "</body>".

    <div id="test"> <p>Esto es un ejemplo</p> </div>

  4. 4

    Agrega un botón HTML en la página mediante el código de abajo, el cual se debe agregar a continuación del ejemplo DIV. El botón no tiene ninguna acción definida en la actualidad, ya que agregarás el controlador de clic a través de jQuery.

    <input type="button" name="myButton" id="myButton" value="Presióname" />

  5. 5

    Agrega el siguiente código HTML entre las etiquetas "<head>" "</head>" debajo de la etiqueta "<script>" utilizada para incluir la biblioteca jQuery.

    <script type="text/javascript"> $(document).ready(function() { $("#myButton").click(function() { $('#test').html("<p>Este es un nuevo contenido de JQuery</p>"); }); }); </script>

    Este código creará una función que se ejecutará automáticamente una vez que la página se haya cargado. A continuación, defines un controlador de clic para el botón con el id de HTML "myButton", que ejecuta una función cuando se le hace clic. La función reemplaza el código HTML contenido en el DIV con el id "test".

  6. 6

    Sube la página a tu servidor web y, a continuación, ábrela en un navegador. Haz clic en el botón y podrás ver que el contenido del DIV cambia al instante a medida que el controlador de clic se ejecuta.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles