Swap items from one list to another

Question

Swap items from one list to another

Navigation

#1 by (5 votes)

3

I have an example of these lists:

<h2> Lista 1 </h2>
<ul class="lista1" id="lista1">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
 </ul>
            
<h2> Lista 2 </h2>
    <ul class="lista2" id="lista2">
      <li>Item5</li>
      <li>Item6</li>
       <li>Item7</li>
    </ul>

What I want is to just invert the lists by giving click to a button: The items in list 1 are moved to list 2 and the items in list 2 are moved to list 1.

javascript html

asked by Reinos Ric 31.08.2017 в 19:06

source

1 answer

How to run Java applications (.jar) without installing JDK - JRE on the computer? Effect blur on a banner with CSS

score 5 · Accepted Answer

Only get in innerHTML of both elements and assigning it to the other you achieve.

 

function invertir()
{
    var contenido1 = document.getElementById("lista1").innerHTML;
    var contenido2 = document.getElementById("lista2").innerHTML;
 
    document.getElementById("lista1").innerHTML = contenido2;
    document.getElementById("lista2").innerHTML = contenido1;   
}

<h2> Lista 1 </h2>
<ul class="lista1" id="lista1">
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
</ul>
            
<h2> Lista 2 </h2>
<ul class="lista2" id="lista2">
 <li>Item5</li>
 <li>Item6</li>
 <li>Item7</li>
</ul>

<button onclick="invertir()">Invertir</button>

And with jquery using the html() method that does the same as innerHTML :

function invertir()
{
  var contenido1 = $("#lista1").html();
  var contenido2 = $("#lista2").html();
  
  $("#lista1").html(contenido2);
  $("#lista2").html(contenido1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2> Lista 1 </h2>
    <ul class="lista1" id="lista1">
       <li>Item1</li>
       <li>Item2</li>
       <li>Item3</li>
       <li>Item4</li>
    </ul>
                
    <h2> Lista 2 </h2>
    <ul class="lista2" id="lista2">
     <li>Item5</li>
     <li>Item6</li>
     <li>Item7</li>
    </ul>

    <button onclick="invertir()">Invertir</button>