DOM

Document Object Model

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<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>

<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.">
DOM usando capas
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.