JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> </script>
</head>
<body>
    
<!-- Page01 -->
<div data-role="page" id="page-01">
    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->
    <div data-role="content">  
        <p>jQuery Mobile Hello world!</p>
        <a id="appendPage" href="#page-02">Click here to page 2</a>
    </div><!-- /content --> 
    <div data-role="footer">
        <h4>Footer content</h4>
    </div><!-- /footer --> 
</div><!-- /page -->


<!-- Page02 -->
<div data-role="page" id="page-02">
    <div data-role="header">
        <h1>My Title2</h1>
    </div><!-- /header -->
    <div data-role="content">  
        <p>This is page 2!</p>
        <a id="appendPage" href="#page-03">Click here to page 3</a>
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Footer content</h4>
    </div><!-- /footer -->     
</div><!-- /page -->

</body>
</html>

JavaScript

// 到第二頁才觸發 PageInit Event
$('#page-02').live('pageinit', function (event) {

    var page3 = '<div data-role="page" id="page-03">' + 
        '<div data-role="header"><h1>My Title3</h1></div>' + 
        '<div data-role="content"><p>This is page 3!</p> </div>' + 
        '<div data-role="footer"><h4>Footer content</h4></div>' + 
        '</div>';
    
    alert('append!');
    $('body').append(page3);

});