I have code that works fine in jqm 1.0 but breaks using 1.4.2

I have code that works fine in jqm 1.0 but breaks using 1.4.2

This is from a book I'm reading "jQuery Mobile up and running" by Maximiliano Firtman 2012 I've been using jqm 1.4.2 to run the book examples and they've worked fine till now.  The example I'm working on now works great using jqm 1.0 but totally breaks in 1.4.2. 
This is the code:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel ="stylesheet" href ="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  7.  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  8.  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

  10. <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/> -->
  11. <!-- // <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
  12. <!-- // <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> -->
  13. <meta name ="viewport" content ="width = device-width, initial-scale = 1">
  14. </head>
  15. <body>
  16. <div data-role ="page">
  17. <div data-role ="header">
  18. <h1> Dynamic page </h1>
  19. </div> 
  20. <div data-role ="content">
  21. <a id="button1" href ="javascript:addPages()"data-role ="button"> Add Pages </a>
  22. <ul id="list1">
  23. </ul>
  24. </div>
  25. </div>
  26. <script>
  27. function addPages() {
  28.  for (var i = 1; i < 5; i++) {
  29.   var page = $("<div>").jqmData("role", "page").attr("id", "page" + i); 
  30.   // header 
  31.   $("<div>").attr("data-role", "header").append($("<h1>").html("Page "+i+"</h1>")).appendTo(page); 
  32.  
  33.   // content 
  34.   $("<div>").attr("data-role","content").append($("<p>").html("Contents for page " + i)).appendTo(page);
  35. $("body").append(page);
  36. $("<li>").append($("<a>").attr("href","#page" + i).html("Go to page" + i)).appendTo("#list1");
  37. }  
  38.   $("#button1").hide();
  39.  }
  40. </script>
  41. </body>
  42. </html>
How would the code need to be changed to make it work as it did in 1.0.  Sorry I put this up  on jsfiddle but it didn't work you need to copy any try it out on your system to test.