Ejercicios resueltos

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.)

Implementar una página que contenga una lista con cuatro items. Probar distintos métodos para manipular la lista.

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>

</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();
}

19 - Manipulación de los elementos del DOM.

Retornar