Problem CSS when using Jquery

Problem CSS when using Jquery

Hi, 

I have a really strange error.  When I use some Jquery function, the css doesn't works. I give you an exemple : 

The first list looks good (l.16), but the second using Jquery doesn't works (l.36).

 Thanks !
  2. <!DOCTYPE html> 
  3. <html>
  4. <head>
  5. <title>Page Title</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  8. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  10. </head>
  11. <body>
  12. <div data-role="page">
  13. <div data-role="header"><h1>Page Title</h1></div>
  14. <div data-role="content" id="content_">
  15.  
  16. <ul data-role="listview" data-divider-theme="b" data-inset="true" id="ul">
  17.             <li data-role="list-divider" role="heading">
  18.                 Divider
  19.             </li>
  20.             <li data-theme="c">
  21.                 <a href="#page1" data-transition="slide">
  22.                     title 1
  23.                 </a>
  24.             </li>
  25.             <li data-theme="c" id="li2">
  26.                 <a href="#page1" data-transition="slide">
  27.                     title 2
  28.                 </a>
  29.             </li>
  30.         </ul> 
  31. </div>
  32.    
  33.    <script type="text/javascript">
  34. $(function(){
  36. $('<ul data-role="listview" data-divider-theme="b" data-inset="true"><li data-theme="c" ><a href="#page1" data-transition="slide">new title</a></li></ul>')
  37. .insertAfter('#ul');
  39. });
  40.     </script>

  44. </div><!-- /page -->

  46. </body>
  47. </html>