How to interchange two position in HTML using jquery on selection of any dropdown value?

Question

I* have two <div> containers which needs to interchange their position of display on the change of a dropdown value.

So, how can this be achieved using Jquery?

bewlow are the two div containers who display position is needed to be interchanged

<div id="first"><p>I will be displayed on second place on dropdown's particular value</p></div>

<div id="second"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>

Answer 1

Simple Using Javascript

<script>

function interchange()
{
 var strDiv1Content = document.getElementById('first').innerHTML;
 var strDiv2Content = document.getElementById('second').innerHTML;

 document.getElementById('first').innerHTML = strDiv2Content;
 document.getElementById('second').innerHTML = strDiv1Content;

}

</script>

using jQuery

<script>
function interchange()
{
  var strDiv1Cont = $("#first").html();
  var strDiv2Cont = $("#second").html();

  $("#first").html(strDiv2Cont);
  $("#second").html(strDiv1Cont);
}

</script>

Call function interchange on some button click like

<input type ='button' value ='interchange' onclick='interchange' />

Answer 2

This will do it.

var firstHtml = $('#first').html();
var secondHtml = $('#second').html();

$('#second').html(firstHtml);
$('#first').html(secondHtml);