HTML5 elements display incorrectly when append a
to an

Question

I'm having trouble with the display of my webpage. I used a unordered list with item inside. But after the unordered list is added by items resulted from javascript code, they appear in wrong way and don't follow the css rule of the unordered list

Plus, I'm using jquery mobile 1.4.2 css and js

this is the html code :

<div id="all" class="ui-body-d ui-content">
                <ul id="allList" data-role="listview" >
                    <li><a href="#">1Data Mining</a></li>
                    <li><a href="#">1Ethics</a></li>
                    <li><a href="#">1HCI</a></li>
                    <li><a href="#">1Mobile Dev</a></li>
                    <li><a href="#">1Software Testing</a></li>
                </ul>
            </div>

And this is the javascript code that insert new item into list

function getDeadlines_success(tx, results){

var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
    var deadline = results.rows.item(i);

    $('#allList').append('<li><a href="#">1Software Testing</a></li>');
}
;}

enter image description here

your code looks fine to me. it seems as though the styles are being applied at initial page load only. — Ruslan, Apr 02 '14 at 13:27
Are you using a reset stylesheet? If so, make sure it comes before your custom `li` styles. — user2428118, Apr 02 '14 at 13:30
Have you inspected the markup *after* appending your new `li` elements, to make sure they've been placed as you expect? Also, an aside, none of those elements are specifically "HTML5 elements" (i.e. they aren't new to HTML5). — ajp15243, Apr 02 '14 at 13:40
I had similar problems in the past with jQuery mobile. It applies styles on page load to make your `li` look native. If you add more later, they won't be styled. What you need to do is after adding the new elements you need to tell jQuery mobile to restyle them. — Matt Burland, Apr 02 '14 at 13:43
@MattBurland Could you tell me how to do it ? I'm still new with web development. I'm doing with phonegap — Brian Pham, Apr 02 '14 at 13:46
@ThắngPQ: Not off the top of my head. I remember the documentation being a bit spotty on this. But probably you need to do something along the lines of `$("MyNewTab").tabs()`. Check the jQuery UI docs too because a lot of jQuery mobile comes from there. Or I guess maybe `.listview('refresh')` as others have suggested. — Matt Burland, Apr 02 '14 at 13:49
@ThắngPQ I think the [`.listview('refresh')`](https://api.jquerymobile.com/listview/#method-refresh) method call for the ListView jQuery Mobile widget (that a few answers have) is what you need. — ajp15243, Apr 02 '14 at 13:49
@MattBruland Thank u, the list view('refresh') worked perfectly :) — Brian Pham, Apr 02 '14 at 13:59

score 2 · Accepted Answer · edited May 23 '17 at 11:49

Here's a jsfiddle with your code: http://jsfiddle.net/ruslans/dKy3B/

Edit: alternative solution (as per suggestions from many):

$("button#btn").click(function () {
    $('#allList').append('<li><a href="#">1Software Testing</a></li>');
    $("#allList").listview('refresh');
});

http://jsfiddle.net/ruslans/tUJt5/

the mark-up you've pasted is not the mark-up it generates after rendering, it's actually a lot messier than that:

<div id="all" class="ui-body-d ui-content">
  <ul id="allList" data-role="listview" class=" ui-listview">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Data Mining</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Ethics</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1HCI</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Mobile Dev</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Software Testing</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
  </ul>
</div>

to add an item to this list and keep the styling, you'll have to do some thing like this as per this answer Dynamically adding <li/> to <ul/> in jquery mobile:

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');

Your alternative solution is perfect. Thank you very much :) — Brian Pham, Apr 02 '14 at 13:58

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

Please use Google or the stackoverflow search function next time.

The first hit for me: https://stackoverflow.com/a/5926112/994304

    $('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');

The last line (refresh) is very important for jQuery Mobile to layout the UI controls again. I'm not sure it's needed for all jQuery controls but i'm sure for this one :).

Stefan.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 02 '14 at 13:47

Stefan Koenen

2,289
2
20
32

1

Sorry I'm not good at English and sometimes I don't know which word is suitable to describe my problem. I will avoid this mistake next time :) – Brian Pham Apr 02 '14 at 14:00

score 1 · Answer 3 · answered Apr 02 '14 at 13:47

1

Try refresh the listview

$("#all").listview('refresh');

answered Apr 02 '14 at 13:47

display name

4,165
2
27
52

Thank you . It works. I didn't know this func before – Brian Pham Apr 02 '14 at 13:59
no problem. The key is to call the refresh on the right element. :) – display name Apr 02 '14 at 14:01

HTML5 elements display incorrectly when append a to an

3 Answers3

HTML5 elements display incorrectly when append a
to an