Cómo reemplazar HTML en un DIV con jQuery

Cómo reemplazar HTML en un DIV con jQuery.
Por gareth downes-powell

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


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

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


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.

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


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


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.