Cómo reemplazar HTML en un DIV con jQuery

Por gareth downes-powell
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.

Paso 1

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

Paso 2

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

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.

Paso 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 "" "".

Esto es un ejemplo

Paso 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.

Paso 5

Agrega el siguiente código HTML entre las etiquetas "" "" debajo de la etiqueta "

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".

Paso 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.