Take the 2-minute tour ×

In JQuery Mobile, I have a navigation bar like the following:

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

Say now I want the nav bar to display "some content" only. This is my code:

$("#nav_bar ul").html("<li><a>some content</a></li>");

But the built-in JQuery Mobile style is not applied to it. How can I do this?

Thanks in advance.

share|improve this question
Can you post a sample of what you're replacing the ul with? There should be one or more <li><a>Something</a></li>. Also, make sure you have the proper classes added. –  Maqsood Jul 17 '12 at 1:10
@Maqsood like now? I think adding classes manually is not an elegant way for doing this since there are too many classes to add. –  Guanlun Jul 17 '12 at 1:23

2 Answers 2

When a page is opened, a script runs to add all the necessary classes. Replacing an item does not rerun the script.

I don't think you can do this without adding in the class manually by either specifying the classes in the text/using a variable or the following:

$("#nav_bar ul").html('<li><a>some content</a></li>').children('li').addClass('class-one class-two');
share|improve this answer

.html() method destroys ul element and its contents then adds new content.

You should use .append() instead.

$("#nav_bar ul").append("<li><a>some content</a></li>");

If you actually want to replace the original content.

Target the div and use .html() method

$("#nav_bar").html("<ul><li><a>some content</a></li></ul>");​
share|improve this answer

Your Answer


