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>