Adding DIV dynamically to the BODY using jQuery mobile

Question

I try to add a DIV to the body, but I obtained a blank page. This is my example.

In the same example I uncommented the HTML because is working fine.

Code :

$("body").append('<div data-role="page"><div data-role="content">HOME</div></div>');
$("body").collapsibleset();

If you inspect the HTML using FireBug or Chrome's debugger, you can see that the div is being added, it's just not showing up in the jsFiddle window. — Marcus
– Marcus, Commented Mar 20, 2013 at 22:11
I understand, but why ? I have the same problem in my browser.. — Mils
– Mils, Commented Mar 20, 2013 at 22:13

derek_duncan · Accepted Answer · 2013-03-20 22:23:47Z

2

This doesn't work because data-role= "page" has a display of none.
enter image description here

I don't know where this css if coming from, but if you disable it as I did, "Home" shows up

EDIT This css is coming from jquery mobile. You could either manually set the css for data-role="page" to display:block; in your stylesheet to override jquery, or you don't even have to assign it in the HTML.

answered Mar 20, 2013 at 22:23

derek_duncan

1,3771 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaya Mayu · Accepted Answer · 2013-03-21 07:28:17Z

2

I added an ID to the page and invoked the show() mothod of jquery. It worked

$("body").html('<div data-role="page" id="myPage"><div data-role="content"><p>HOME</p> </div></div>');
$("#myPage").show();

Please check out the fiddle at http://jsfiddle.net/cFens/2/

answered Mar 21, 2013 at 7:28

Jaya Mayu

17.3k35 gold badges116 silver badges149 bronze badges

Comments

Amir · Accepted Answer · 2013-03-20 22:32:39Z

0

You should uncheck jQuery Mobile 1.1.1 and check something else like jQuery UI 1.8.18 in the jsFiddle

answered Mar 20, 2013 at 22:32

Amir

4,1314 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

Adding DIV dynamically to the BODY using jQuery mobile

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related