jQuery proporciona varias funciones para manipular elementos y contenido de una página: Simplemente remplazando HTML, posicionar nuevo HTML en relación de un contenido seleccionado, remover completamente etiquetas y contenido de la página. Este post comienza una serie sobre como manipular el contenido mediante las funciones de jQuery. Comenzaré hablando de la función html().
La función html
Permite tanto leer contenido HTML que hay dentro de un elemento como modificarlo con otro HTML. Se usa la función html() con una selección jQuery.
Pongamos que tenemos el siguiente código HTML
|
1 2 3 4 5 |
<div id="contenedor"> <div id="errores"> <p>Tienes un campo incompleto.</p> </div> </div> |
Si queremos recuperar el contenido que tiene el <div> errores sólo hay que seleccionarlo y añadirle .html(). En este código se mostrará el contenido en una ventanilla de alerta con la función alert().
|
1 2 3 |
$(document).ready(function(){ alert( $('#errores').html() ); }); |
Se debería de mostrar una ventanilla de alerta como la siguiente
Contenido del div errores.
Cuando se usa la función html() como ahora, puedes hacer una copia del HTML que hay dentro de un elemento específico y pegarlo a otro elemento.
Si proporcionas un argumento a la función como un string, remplazarías el contenido actual que hay dentro de la selección.
|
1 |
$('#errores').html('<p>Ahora tienes 6 campos incompletos</p>'); |
Esto remplaza todo el código HTML que hay dentro del elemento con el id errores. El código HTML quedaría de la siguiente forma
|
1 2 3 4 5 |
<div id="contenedor"> <div id="errores"> <p>Ahora tienes 6 campos incompletos</p> </div> </div> |
Una cosa a tener en cuenta tanto con la función html() y text(), la cuál se hablará más adelante, es que a la hora de recuperar el contenido de múltiples elementos de una selección jQuery, sólo recupera el primero. Por ejemplo, tienes una página con 5 <div> y ejecutas el siguiente código:
|
1 |
var contenidos = $('div').html(); |
La variable contenidos sólo almacenaría el contenido del primer <div>.
Sin embargo, a la hora de insertar HTML, todos los elementos se verían afectados. En el caso anterior si ejecutas este código:
|
1 |
$('div').html('<p>Hola mundo!</p>'); |
En cada uno de los 5 <div> tendrá un párrafo con el texto «Hola mundo!».
Y hasta aquí el tutorial de hoy, espero que os haya servido de ayuda. A seguir picando 🙂