title: jQuery Mobile best way to create pop up and content dynamically
body: <p>I have the following code creating a pop up using jQuery mobile. The pop up is created and a form is created and appended to the popup along with two buttons. This code does work but I am wondering if there is a better way to achieve my intended goal.        </p>
  
  <pre><code>    //create a div for the popup
      var $popUp = $("&lt;div/&gt;").popup({
          dismissible : false,
          theme : "a",
          overlyaTheme : "a",
          transition : "pop"
      }).bind("popupafterclose", function() {
                      //remove the popup when closing
          $(this).remove();
      });
      //create a title for the popup
      $("&lt;h2/&gt;", {
          text : PURCHASE_TITLE
      }).appendTo($popUp);
  
              //create a message for the popup
      $("&lt;p/&gt;", {
          text : PURCHASE_TEXT
      }).appendTo($popUp);
  
      //create a form for the pop up
      $("&lt;form&gt;").append($("&lt;input/&gt;", {
          type : "password",
          name : "password",
          placeholder : PASSWORD_INPUT_PLACEHOLDER
      })).appendTo($popUp);
  
     //Create a submit button(fake)
      $("&lt;a&gt;", {
          text : SUBMIT_BTN_TXT
      }).buttonMarkup({
          inline : true,
          icon : "check"
      }).bind("click", function() {
          $popUp.popup("close");
          that.subscribeToAsset(callback);
      }).appendTo($popUp);
  
      //create a back button
      $("&lt;a&gt;", {
          text : BACK_BTN_TXT,
          "data-jqm-rel" : "back"
      }).buttonMarkup({
          inline : true,
          icon : "back"
      }).appendTo($popUp);
  
      $popUp.popup("open").trigger("create");
  </code></pre>