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

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

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

function inicializarEventos() {
  let 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() {
  let 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() {
  let x = $("ul");
  x.append("<li>otro item al final</li>");
}

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

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

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

function eliminarPrimeroSegundo() {
  let x = $("li");
  x = x.slice(0, 2);
  x.remove();
}

function eliminarDosUltimos() {
  let x = $("li");
  x = x.slice(x.length - 2);
  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() {
  let 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() {
  let 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() {
  let 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() {
  let x = $("li");
  let 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() {
  let 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 slice que especifica un rango de índices (en nuestro ejemplo el rango es de la posición 0 hasta la 2 sin incluirla), el método slice retorna todos los elementos que se encuentran en dicho rango y posteriormente llamamos a remove:

function eliminarPrimeroSegundo() {
  let x = $("li");
  x = x.slice(0, 2);
  x.remove();
}

Para eliminar los dos elementos finales podemos también utilizar el método slice (si no indicamos un segundo parámetro luego es hasta el final):

function eliminarDosUltimos() {
  let x = $("li");
  x = x.slice(x.length - 2);
  x.remove();
}


Retornar