Div Changes in HTML

Question

I m having one requirement of swaping div on html.Consider first div with id='current',on page load 5 records are append on first div.I do have one another div with id="next" which gets another 5 record filled after click event from ajax in innerhtml from javascript.Again after click event another 5 records picked,i want to append it on div with id='next' and next will go to current and old 5 records which is on current get empty from javascript and so on.For example:

<div id="current"></div>(current 5 records on pageload)
<div id="next"></div>(another 5 records on click event from ajax in innerHTML)  

Again when onclick another 5 records are coming which I want to append on next and old next will go to current and old current get deleted. Any suggestion. Thanks.

Answer 1

html

<div id="current">(current 5 records on pageload)</div>
<div id="next">(another 5 records on click event from ajax in innerHTML) </div>
<button id="loadDiv">Load Data</button>

jquery

var count = 1; // gobal variable for checking click count

$('#loadDiv').click(function(){

      data = // do ajax and get data
      if(count == 1)
      {
        $('#current').empty();  // deleting old data of current
        $('#current').html('data');
      }
      else   
      {
        $('#current').empty(); // deleting old data of current
        $('#current').html($('#next').html());// loading current with next
        $('#next').empty();  // deleting data in next
        $('#next').html(data); // loading next with new data
      }  
     count ++;       
   });

Answer 2

using jquery this is very easy:

<div id="current"></div>
<div id="next"></div>

in the ajax success function

$("#current").html($("#next").html())
$("#next").html(loaded_data)

Answer 3

Just try that fucntions to do that. Functions not use jquery and do the same in diferent way.

1- Change content while new content is on a String.

function spaw_div_content(new_content){
    var current = document.getElementById("current")
    var next = document.getElementById("next")    
    current.innerHTML = next.innerHTML
    next.innerHTML = new_content;
}

2- Change content while new content is on an array of elements.

function spaw_div_content(new_content){
    var current = document.getElementById("current")
    var next = document.getElementById("next")

    current.innerHTML = next.innerHTML
    next.innerHTML = "";

    for(iNC in new_content){
        next.appendChild(new_content[iNC])
    }
}