Move data from one list to another [closed]

Question

Move data from one list to another [closed]

Navigation

#1 by (1 votes)

0

I want to know of an example where two unordered lists <ul> can transport their data from one to another.

For example: Suppose we have the lista uno and lista dos , each with different data. I want all the data that is inside the lista uno to move to the lista dos when I press a button.

javascript html

asked by Reinos Ric 08.08.2017 в 00:34

source

1 answer

How to put onclicklistener to a listview filled with json How to update fields by querie of databases of different servers?

score 1 · Accepted Answer

Are you looking for something like that?

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>

To change in both directions, you could do it like this ( CSS is not necessary, just to make it a little more comfortable to look at ):

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>