0

Quiero saber de algún ejemplo donde dos listas no ordenadas <ul> puedan trasportar sus datos de una a otra.

Por ejemplo: Supongamos que tenemos la lista uno y lista dos, cada una con datos diferentes. Quiero que todos los datos que están dentro de la lista uno se muevan para la lista dos al presionar un botón.

1
  • Reinos, te recomiendo que leas como preguntar y edites tu pregunta con lo que has investigado e intentado hasta el momento el 7 ago. 2017 a las 22:39

1 respuesta 1

1

¿Estás buscando algo así?

const lista1 = document.getElementById('lista-1');
const lista2 = document.getElementById('lista-2');

function moverItems() {
  Array.from(lista1.children).forEach((item) => mover(item));
}

function mover(item) {
  lista2.appendChild(item);
}
<h2>Lista 1</h2>
<ol id="lista-1">
  <li>Nosotros</li>
  <li>ser</li>
  <li>items</li>
</ol>
<h2>Lista 2</h2>
<ol id="lista-2">
  <li>Nunca</li>
  <li>nos</li>
  <li>moveremos</li>
</ol>
<button onclick="moverItems()">Mover items</button>


Para cambiar en ambos sentidos, podrías hacerlo así (El css no es necesario, solo para que sea un poquito más cómodo a la vista):

function moverItems(selectorOrigen, selectorDestino) {
  const origen = document.getElementById(selectorOrigen);
  const destino = document.getElementById(selectorDestino);

  Array.from(origen.children).forEach(
    (item) => mover(item, destino)
  );
}

function mover(item, destino) {
  destino.appendChild(item);
}
.listas {
  display: flex;
  justify-content: space-around;
}

.listas > div {
  display: flex;
  flex-direction: column;
}

h2 {
  margin: 0;
}
<div class='listas'>
  <div>
    <h2>Lista 1</h2>
    <ol id="lista-1">
      <li>Nosotros</li>
      <li>ser</li>
      <li>items</li>
    </ol>  
  </div>
  <div>
    <h2>Lista 2</h2>
    <ol id="lista-2">
      <li>Nunca</li>
      <li>nos</li>
      <li>moveremos</li>
    </ol> 
  </div>
</div>
<h2>Mover items</h2>
<button onclick="moverItems('lista-1', 'lista-2')">
  1 -a-&gt;2
</button>
<button onclick="moverItems('lista-2', 'lista-1')">
  1 &lt;-a- 2
</button>

5
  • Hola claro si , solo que Con el mismo código ¿pasaría los datos de la lista dos a la lista uno?.
    – Reinos Ric
    el 7 ago. 2017 a las 22:53
  • 1
    Con un solo botón quieres mover todos los ítems de la lista 1 hacia la lista 2. Y luego con el mismo botón mover todos los ítems de la lista 2 a la lista 1 dejando la lista 2 vacía? Perdón la pregunta, pero no me quedó muy claro la idea.
    – Francute
    el 7 ago. 2017 a las 22:57
  • Con otro botón seria para mover todos los ítems de la lista 2 a la lista 1 dejando la lista 2 vacía
    – Reinos Ric
    el 8 ago. 2017 a las 14:42
  • 1
    Ahí agregué ese caso también en mi respuesta :)
    – Francute
    el 8 ago. 2017 a las 15:18
  • Excelente muchas gracias
    – Reinos Ric
    el 8 ago. 2017 a las 15:56

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.