Losing ListView formatting when HTML is passed to a <div>

Losing ListView formatting when HTML is passed to a <div>

Hello:

I am still learning js and jQuery. I ran across this issue I'm hoping someone can point me in the right direction. 

I have a function in my js file that takes some data and dynamically combines it with HTML and passed to a div in my HTML doc so it can be displayed. Here is that function:

  1. function fnShowClassesTable(data) {
  2. var str = "<ul data-role='listview' data-inset='true'>";*/
  3. str += "<ul data-role='listview' data-inset='true'>"; // Build a string of HTML; using a <table>
  4. str += "<li data-role='list-divider' role='heading'>My Active Programs</li>" // A Row in the Table with Headings
  5. for(var i = 0; i < data.length; i++) { // For "x" number of times-worth of Data...
  6. // Build a row at a time of data
  7. str += "<li><a href='#' data-transition='slide'>"  + data[i].doc._id + 
  8.    ", " + data[i].doc.cName + 
  9.    " - " + data[i].doc.cInst + 
  10.    "</a></li>";
  11. }
  12. str += "</ul>";
  13. $elDivShow.html(str); // Render the string as HTML on-screen
  14. $elDivShow.hide().fadeIn(250);
  15. } 

In my HTML doc, the function is called to display with a simple "<div id="divShow"></div>" 

It works to display the data, however it doesn't have the formatting I expected with the jQuery ListView. To show what I mean, below is a screenshot of how it renders. The top list is how it renders, the bottom list is where I hard-coded what I wanted it to look like.



Is it having this issue because it's being passed through a div? I'm new to all this so just looking for some pointers.

I am thinking it's not my CSS, since I'm not specifically tweaking this or any other ListView.

Any input is greatly appreciated!