JQuery code to rename a div

Question

Is there any method to rename a div element. I have a div with id fm_form_container,which lists a set of forms. If I click a link in a tab,for eg, My Forms, I want the name of this fm_form_container to change as tab_content_container. That is, all my forms should come inside the div, tab_content_container.

Is there any method to rename a div,like append and addClass?

EDIT

These are the css for the div id "fm_myforms_container and tab_content_container.

.tab_content_container
 {
    width:100%;
    background-color:#FFFFE1;
    border:1px #EEEEEE solid;
 }

 #fm_myforms_container
 {
    width:100%;
    background-color:#FFF;
    border:1px #EEEEEE solid;
 }

If I give,

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

    //$("#fm_myforms_container").attr("id", "tab_content_container");

    $("#fm_myforms_container").addClass("tab_content_container");

    viewAllMyForms();  

});

the CSS for tab_content_container does not get applied.

Answer 1

You can use jQuery's attr method :

$("#fm_form_container").attr("id", "tab_content_container");

Answer 2

Where the My Forms link has a class of "myForms":

$(".myForms").click(function () {
  $("#fm_form_container").attr("id", "tab_content_container");
});

Updated for comment to above answer:

*"$("#tab_content_container").attr("id", "fm_form_container"); when I click 'Home'. But the div name is changed only for the first div n not for the seccond and third."*

This is because you're matching against an ID (#), and thus will only match a single element. If you want to apply your changes to multiple elements, you will have to apply them to a class, e.g:

class="tab_content_container" instead of id="tab_content_container"