3

Tengo un ejemplo de estas listas:

<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>

Lo que deseo es solo invertir las listas dándole click a un botón: Los items de la lista 1 se pasen a la lista 2 y que los items de la lista 2 se pasen a la lista 1.

2
  • Se acepta jquery?
    – Einer
    Commented el 31 ago. 2017 a las 17:08
  • Claro que si...
    – Reinos Ric
    Commented el 31 ago. 2017 a las 17:15

1 respuesta 1

5

Solo obten en innerHTML de ambos elementos y asignandoselo al otro lo logras.

 

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>

Y con jquery utilizando el metodo html() que hace lo mismo que 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>

2
  • Hola, me funciono, gracias!
    – Reinos Ric
    Commented el 31 ago. 2017 a las 17:13
  • 1
    Dale una mirada a la respuesta actualiza para que la veas con jquery. Recuerda marcarla si es la solucion que esperabas.
    – Einer
    Commented el 31 ago. 2017 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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