Añadir elementos con after() y before()
Otra funcionalidad muy práctica en jQuery es que podemos añadir elementos antes y depués de otro elemento encontrado. esto lo podemos hacer por medio de los métodos after() y before(). En el siguiente ejemplo añadiremos un párrafo, un botón y una imagen, los cuales no existen en la página inicial:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After/Before</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
$("#respuesta").click(onRespuesta);
}
function onRespuesta(){
$("p").after("<p id='res'>Sandro de Botticelli</p>");
$("#respuesta").before("<input type='button' id='pintura' value='Ver pintura'/>");
$("#pintura").click(onPintura);
$("#respuesta").attr("disabled","disabled");
}
function onPintura(){
$("#res").after("<img src='imagenes/afrodita.jpg'/>");
$("#pintura").attr("disabled","disabled");
}
</script>
</head>
<body>
<input type="button" id="respuesta" value="Respuesta" />
<p>¿Quién pintó el nacimiento de Venus en 1484?</p>
</body>
</html>
Ejemplo: http://pacoarce.com/jQuery/AfterBefore.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/
No hay comentarios:
Publicar un comentario