How to dynamically add a navbar to a jQuery Mobile application

Question

How can I dynamically add a navbar to my jquery mobile application? From javascript I want to be able to add the navbar elements to the dom and then have them parsed.

Answer 1

I found that I could add the element to the DOM however I wanted, and then call .navbar() on the element and it would perform the navbar parsing.

For instance I could use

var myNavBar = $('div', {
    'data-role':'navbar',
    'html':'<ul><li><a id="some">First</a></li></ul>'
}).appendTo(myPage).navbar();

Answer 2

Use this code after appending HTML code using DOM:

$("div[data-role='navbar']").navbar();