Añadir contenido con jQuery: Funciones before y after

jQuery

Añadir contenido con jQuery

En jQuery se puede añadir contenido fuera de la selección usando los métodos o before  y after para que sea antes de la selección o después respectivamente.

Método .after()

Este método permite añadir contenido justo después del cierre de etiqueta del elemento seleccionado. Un ejemplo de uso sería cuando se valida un formulario y queremos que el error se muestre justo debajo del campo que tiene el valor erróneo.

XHTML
1
2
3
<input type="text" id="campo" />
<br />
<button id="validar">Validar</button>

El caso es cuando el visitante pulse en el botón para enviar el formulario, mediante un programa compruebe el campo y verifique que está todo correcto en caso contrario mandarías un mensaje de error.

Para este ejemplo seré mucho más simplista y nada más pulsar el botón se escribirá el error debajo del campo.

JavaScript
1
2
3
4
5
$(document).ready(function(){
$("#validar").click(function(){
$('#campo').after("<p> Tienes un error en este campo </p>");
});
});

Al pulsar el botón el código HTML quedaría de la siguiente forma:

XHTML
1
2
3
4
<input type="text" id="campo" />
<p> Tienes un error en este campo </p>
<br />
<button id="validar">Validar</button>

Método .before()

Este método es el contrario al after, escribe el código justo antes de la apertura de etiqueta del elemento seleccionado.

Básandonos en el ejemplo anterior, en vez de querer que el aviso aparezca después del campo lo queremos antes. El código jQuery sería el siguiente.

JavaScript
1
2
3
4
5
$(document).ready(function(){
$("#validar").click(function(){
$('#campo').before("<p> Tienes un error en este campo </p>");
});
});

Lo que generaría el siguiente código HTML al pulsar el botón.

XHTML
1
2
3
4
<p> Tienes un error en este campo </p>
<input type="text" id="campo" />
<br />
<button id="validar">Validar</button>

Y hasta aquí el las funciones before y after y de la serie sobre cómo añadir contenido en jQuery. Buen finde 🙂