Sol dom
De wikiserver
La revisió el 15:13, 6 abr 2016 per Jnoguera (Discussió | contribucions)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(inicializarEventos);
function inicializarEventos(){
$("#eliminarElementos").click(function(){
$("div").empty();
})
$("#pintarCuadradoVerde").click(function(){
$("div").html("<span id='rqr' style='float:left; background-color:green; width:50px; height:30px'></span>");
});
$("#anadirElementoAlFinal").click(function(){
$("div").append("<span style=' float:left; background-color:blue'>texto al final</span>");
});
$("#anadirElementoAlPrincipio").click(function(){
$("div").prepend("<span style='float:left; background-color:green'>texto al pricipio</span>");
});
/*Mediante el m�todo eq (equal) indicamos la posici�n del elemento que vamos a borrar*/
$("#eliminarUltimoElemento").click(function(){
$("span").eq( $("span").length-1 ).remove();
});
$("#eliminarPrimerElemento").click(function(){
$("span").eq(0).remove();
});
}
</script>
</head>
<body>
<h1>M�todos para manipular nodos del DOM con jQuery.</h1>
<div style="background-color:red; width:400px; height:200px">
</div>
<input type="button" id="eliminarElementos" value="Eliminar elementos de la lista"><br/>
<input type="button" id="pintarCuadradoVerde" value="Pintar cuadrado verde"><br/>
<input type="button" id="anadirElementoAlFinal" value="A�adir un elemento al final"><br/>
<input type="button" id="anadirElementoAlPrincipio" value="A�adir un elemento al principio"><br/>
<input type="button" id="eliminarUltimoElemento" value="Eliminar el �ltimo elemento."><br/>
<input type="button" id="eliminarPrimerElemento" value="Eliminar el primer elemento.">
</body>
</html>
