Skip to main content
se eliminaron 8 caracteres en el cuerpo
Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

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>

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>

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>

Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

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>