如何动态创建导航栏，当我点击导航栏时，它会在jquery mobile中创建列表视图？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

<div id="navbar" data-role="navbar"></div>

$(document).ready(function() {
  var navbar = $("#navbar");
  
  // 创建列表项
  var listItem1 = $("<a>").attr("href", "#page1").text("Page 1");
  var listItem2 = $("<a>").attr("href", "#page2").text("Page 2");
  var listItem3 = $("<a>").attr("href", "#page3").text("Page 3");
  
  // 将列表项添加到导航栏容器中
  navbar.append(listItem1, listItem2, listItem3);
  
  // 刷新导航栏样式
  navbar.navbar();
});

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <!-- 页面内容 -->
  </div>
</div>

<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="content">
    <!-- 页面内容 -->
  </div>
</div>

<div data-role="page" id="page3">
  <div data-role="header">
    <h1>Page 3</h1>
  </div>
  <div data-role="content">
    <!-- 页面内容 -->
  </div>
</div>