Crear una nueva capa o div al vuelo con JQuery. Código fuente y vídeo
Siguiendo con JQuery, en esta ocasión vamos a ver como añadir una nueva capa o <div> al vuelo mientras ya está corriendo nuestra web, para ello vamos a utilizar la librería JQuery que ya hemos mencionado y veremos lo sencillo que es añadir el nuevo código.
He de decir que este código no es solamente para añadir una capa al vuelo, sino que también puedes utilizarlo para añadir cualquier código en la capa que quieras, es una manera de añadir más código html a nuestro documento y como tal a cualquier capa y objeto con el id para que pueda ser localizado. Este tutorial conforma un conjunto de códigos de ejemplo para la realización de un juego arcade que estoy desarrollando a la misma vez, por lo que el código no es ni muy “bonito” ni muy “currado” pero para ir aprendiendo sobre la marcha… funciona 😉
Sin más os dejo el código, como veréis no es nada complicado y en realidad la linea que nos interesa es de lo más sencilla:
[codesyntax lang=”javascript”]
jQuery('#Pantalla').append('<div class = "nave"></div>')
[/codesyntax]
En este caso tenemos una capa llamada Pantalla y a esta le añadimos con append (al final de la capa) otra nueva capa de clase “nave”. Así cada vez que llamamos la función nos crea una capa de este tipo y nos la muestra. El código completo a continuación:
[codesyntax lang=”html4strict”]
<!DOCTYPE html>
<html>
<head>
<title>Crear capa al vuelo con JQuery al pulsar un botón</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.nave{
background-image:url(./imgs/nave.png);
height: 67px;
width: 100px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function CrearNuevoDiv()
{
jQuery('#Pantalla').append('<div class = "nave"></div>')
};
</script>
</head>
<body>
Ejemplo de como crear una nueva capa o div al pulsar un botón con JQuery
<input type="button" name="Crear" id="Crear" value="Crear" onClick="CrearNuevoDiv()">
<div id='Pantalla'>
<br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
[/codesyntax]
Tened cuidado al copiar que las comillas simples o dobles es posible que tengáis que corregirlas, por lo demás el código de ejemplo en JQuery para crear capas al vuelo con append lo podéis probar aquí y también verlo desde el navegador que será más sencillo de copiar sin problemas de codificación.
Si tenéis cualquier duda podéis comentarla y por supuesto agradezco los +1 y likes 😉
Comments