Dynamically create listview using javascript

Dynamically create listview using javascript

I want to use the mobile listview like this:

  1. < ul data-role = "listview" data-inset = "true" >
  2.      < li >< a href = "#" >
  3.          < img src = "../_assets/img/album-bb.jpg" >
  4.      < h2 >Broken Bells</ h2 >
  5.      < p >Broken Bells</ p ></ a >
  6.      </ li >
  7.      < li >< a href = "#" >
  8.          < img src = "../_assets/img/album-hc.jpg" >
  9.      < h2 >Warning</ h2 >
  10.      < p >Hot Chip</ p ></ a >
  11.      </ li >
  12.      < li >< a href = "#" >
  13.          < img src = "../_assets/img/album-p.jpg" >
  14.      < h2 >Wolfgang Amadeus Phoenix</ h2 >
  15.      < p >Phoenix</ p ></ a >
  16.      </ li >
  17. </ ul >

But I need to create this dynamically by using javascript. Is this the way to go?

  1.  var list = document.createElement('ul');
     list.setAttribute('data-role',"listview");
     list.setAttribute('data-inset',"true");

Doe someone have a working example of this?

Thanks