ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

en el siguiente código aprendes cómo insertar contenido antes o después de un elemento identificado utilizando los métodos before y after respectivamente

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
$("img").before("<b>Antes</b>");
});

$("#boton2").click(function(){
$("img").after("<i>Despues</i>");
});
});
</script>
</head>
<body>

<img src="logo.jpg" alt="videotutoriales.es" width="100" height="140"><br><br>

<button id="boton1">Insertar Antes</button>
<button id="boton2">Insertar despues</button>
</body>
</html>

a diferencia de los dos métodos vistos en la entrada anterior append y prepend de jQuery que ponen el contenido dentro del elemento identificado,  con los métodos before y after el contenido se inserta antes o después del elemento identificado pero fuera del elemento identificado

en este ejemplo tenemos una imagen, en este caso luego, y dos botones identificado como botón 1 y botón 2

una vez hemos hecho referencia a la librería de jQuery y dentro del método ready del documento programamos dos eventos clicks uno para cada botón

en el botón 1 utilizamos el método before para insertar un texto en negrita antes de la imagen

y en el segundo botón o botón 2 insertamos el texto después en cursiva utilizando el método after