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 mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!