19 - Manipulación de los elementos del DOM.

jQuery dispone de una serie de métodos que nos facilitan el tratamiento de los elementos del Dom.

Confeccionaremos un problema que haga uso de estos métodos.

Problema:Implementar una página que contenga una lista con cuatro items. Probar distintos métodos para manipular la lista (borrar, insertar)

pagina1.html

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Métodos para manipular nodos del DOM con jQuery.</h1>
<ul>
<li>Primer item.</li>
<li>Segundo item.</li>
<li>Tercer item.</li>
<li>Cuarto item.</li>
</ul>
<input type="button" id="boton1" value="Eliminar la lista completa."><br>
<input type="button" id="boton2" value="Restaurar Lista"><br>
<input type="button" id="boton3" value="Añadir un elemento al final de la lista"><br>
<input type="button" id="boton4" value="Añadir un elemento al principio de la lista"><br>
<input type="button" id="boton5" value="Eliminar el último elemento."><br>
<input type="button" id="boton6" value="Eliminar el primer elemento."><br>
<input type="button" id="boton7" value="Eliminar el primero y segundo elemento."><br>
<input type="button" id="boton8" value="Eliminar los dos últimos."><br>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#boton1");
  x.click(eliminarElementos)
  x=$("#boton2");
  x.click(restaurarLista)
  x=$("#boton3");
  x.click(anadirElementoFinal)
  x=$("#boton4");
  x.click(anadirElementoPrincipio)
  x=$("#boton5");
  x.click(eliminarElementoFinal)
  x=$("#boton6");
  x.click(eliminarElementoPrincipio)
  x=$("#boton7");
  x.click(eliminarPrimeroSegundo)
  x=$("#boton8");
  x.click(eliminarDosUltimos)
}

function eliminarElementos()
{
  var x;
  x=$("ul");
  x.empty();
}

function restaurarLista()
{
  $("ul").html('<li>Primer item.</li><li>
     Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}

function anadirElementoFinal()
{
  var x;
  x=$("ul");
  x.append("<li>otro item al final</li>");
}

function anadirElementoPrincipio()
{
  var x;
  x=$("ul");
  x.prepend("<li>otro item al principio</li>");
}

function eliminarElementoFinal()
{
  var x;
  x=$("li");
  var cantidad=x.length;
  x=x.eq(cantidad-1);
  x.remove();
}

function eliminarElementoPrincipio()
{
  var x;
  x=$("li");
  x=x.eq(0);
  x.remove();
}

function eliminarPrimeroSegundo()
{
  var x;
  x=$("li");
  x=x.lt(2);
  x.remove();
}

function eliminarDosUltimos()
{
  var x;
  x=$("li");
  x=x.gt(x.length-3);
  x.remove();
}

Para borrar todos los elementos contenidos en una lista obtenemos la referencia de la lista mediante la función $ y seguidamente llamamos al método empty:

function eliminarElementos()
{
  var x;
  x=$("ul");
  x.empty();
}

Para restaurar la lista utilizamos el método html insertando directamente los item a partir del elemento ul:

function restaurarLista()
{
  $("ul").html('<li>Primer item.</li><li>
     Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}

Para añadir un elemento al final de la colección de elementos del objeto jQuery disponemos del método append:

function anadirElementoFinal()
{
  var x;
  x=$("ul");
  x.append("<li>otro item al final</li>");
}

Para añadir un elemento al principio disponemos de un método llamado prepend:

function anadirElementoPrincipio()
{
  var x;
  x=$("ul");
  x.prepend("<li>otro item al principio</li>");
}

Para eliminar un elemento del final de la lista, primero obtenemos la cantidad de elementos que almacena el objeto jQuery por medio de la propiedad length y luego mediante el método eq (equal) indicamos la posición del elemento que necesitamos (el método eq retorna otro objeto de tipo jQuery) y por último llamamos al método remove:

function eliminarElementoFinal()
{
  var x;
  x=$("li");
  var cantidad=x.length;
  x=x.eq(cantidad-1);
  x.remove();
}

Para eliminar un elemento del principio es similar a borrar el último, pero aquí no necesitamos saber la cantidad de elementos que almacena el objeto jQuery ya que debemos acceder al primero (el primero se almacena en la posición cero):

function eliminarElementoPrincipio()
{
  var x;
  x=$("li");
  x=x.eq(0);
  x.remove();
}

Para eliminar el primero y segundo elemento que almacena el objeto jQuery disponemos de un método lt (low than) que retorna todos los elementos menores a la posición que le pasamos como parámetro (en nuestro ejemplo nos retorna los elementos de la posición 0 y 1:

function eliminarPrimeroSegundo()
{
  var x;
  x=$("li");
  x=x.lt(2);
  x.remove();
}

Para eliminar los dos elementos finales podemos rescatarlos mediante el método gt (great than) que retorna un objeto jQuery con todos los elementos que superan la posición que le indicamos en el parámetro:

function eliminarDosUltimos()
{
  var x;
  x=$("li");
  x=x.gt(x.length-3);
  x.remove();
}


Retornar