Dynamically create html elements with jquery in a SharePoint Content Editor Web Part

One of the ways I like to create solutions with SharePoint is to utilize the Content Editor web part with some jquery to sort of commandeer the UI, because sometimes you just need to get some prototypes put together and the fastest way is to mock up and then create similar functionality.

In this example I have a document library that I have 9 pages in, I created the page names to coincide with the names of the dynamically generated buttons, divs, and iframes I am creating. My page names are
"Home", "Cost", "Schedule", "Performance", "Charts", "Reports", "Logistics", "Inventory"

Basically what I do is that I have2 empty divs on my page, and then as the page loads it creates all the buttons, divs, and iframes based off the list above that is used as an array.

What I really like about this solution is that I can reuse it over and over again since in order to get this script to work from a central location  I had to abstract out the order number to be used as a parameter which happens to be the site's title and is included in my url. Since all of our sub sites are created based off a template this works perfectly.

The script that my content editor points to looks like this

Now that we have that we can turn our attention to the javascript file that will loop through the array and create our buttons, divs, and iframes

// Define some initial variables
var buttonClicked = 'showHome';
var currentDiv = 'divHome';
var homeUrl="";
var siteName = "/dashboards/";
var siteLibrary = "/SitePages/";
var urlEnd = ".aspx?isdlg=1";
// This is an array of all the items names we want to use for our buttons
var pages = ["Home", "Cost", "Schedule", "Performance", "Charts", "Reports", "Logistics", "Inventory"];
// Since this script is centralized we need to look at the current Dashboard and get the task order number
var currentTaskOrderUrl = window.location.href;
var TaskOrderNumber = currentTaskOrderUrl.split('/')[4];
// onClick event for our dynamically created buttons
$(".switchIframe").live('click', function(e){
 // Lets make sure that nothing happens if the user clicks an already selected button
 if (e.target.id != buttonClicked)
 {
  
  // The user clicked a button for new content, we can target the div we want to show by 
  // doing a replace of the currently selected button's id, which has the same id name 
  // button id = showHome & div id = divHome
  targetDiv = (e.target.id).replace("show", "div");
  var $targetIframe = $($(this).data('target')), 
  src = $(this).data('src');
  
  if($targetIframe.attr('src') != src)
  {
   $targetIframe.attr('src', src);
  }

  hideDiv(currentDiv);
  showDiv(targetDiv);
  currentDiv = targetDiv;
  buttonClicked = e.target.id;
 }
    
});

function createLayout()
{
 var b;
 // Loop through the array of items we need to create
 for(b=0;b');
  // Source code to create all of our divs and iframes inside a div with an ID of contentdivs
  $("#contentdivs").append('

'+pages[b]+'


');
 }
}

function showDiv(id) {
   var $sDiv = $('#' + id);
   $sDiv.show(800);
}

function hideDiv(id) {
   var $hDiv = $('#' + id);
   $hDiv.hide(200);
}

$(document).ready(function(){
 // Build the UI elements, buttons, divs, iframes
    createLayout();
    // Load up the source attribute of the home iframe
    $('#iframeHome').attr('src', homeUrl);
    // Show the div
 $('#divHome').show(600);
        
 
});