Dynamically append ul to a div element

Question

I am trying to append list view (from ul --- ul) dynamically is not working. I am using JQM 1.3.0 & phoneGap 2.4.0 code is below.

    <div data-role="content" id='lists'>
    <div style="background-color:rgb(248,248,248);" >

        <ul data-role="listview" data-inset="true" data-theme='d' style="-webkit-border-radius:5px;">

            <li data-icon='false'><a ><p style='position:absolute;left:70px;top:10px;right:3px;bottom:3px;font-size:16px;'><b>Abc Blog</b></p><p style='position:absolute;left:70px;top:30px;right:3px;bottom:3px;font-size:13px;'><i>By: </i><b>xyz</b>  <i>4 days ago</i></p><p style='position:absolute;left:70px;top:50px;right:3px;bottom:3px;font-size:13px;'>5 Likes - 3 comments</p><img src="http://172.16.6.54/elgg/mod/profile/icondirect.php?lastcache=1373278757&joindate=1360321536&guid=43&size=medium" class='custom-image' style='position:absolute;left:3px;top:3px;right:3px;bottom:3px;max-height:60px;max-width:60px'/></a></li>
            <li style='height:20px' data-icon='false' data-theme='c' >
                <table border="0" width='100%' valign="top">
                    <tr style='height:20px'>
                        <td width='50%' align='middle' onclick='javascript:likeClicked();'>
                            <img src="img/unlike.png" style='max-height:20px;max-width:20px' />
                        </td><td>|</td>
                        <td width='50%' align='middle' onclick='javascript:likeClicked();'>
                            <img src="img/like.png" style='max-height:20px;max-width:20px' />
                        </td>

                    </tr>
                </table></li>

        </ul>

</div>
   <script>
        function addList()
{
              var div = document.getElementById('lists');
              list = "same code in from <ul -- /ul> as there above";
              div.innerHTML  =list + div.innerHTML;

              $("ul").listview();

}

thanks a lot.

What device are you testing on? Do you have any log information? Do other portions of JQM work? (Do thinks like selectors work that will let us know JQM has loaded onto the page successfully?) I know that advanced features (CSS transforms, etc) wont work on for example Android, since Cordova uses AndroidWebView which runs an outdated (think IE6) version of WebKit. However it seems like using `innerHTML` should still work... — MBillau, Sep 06 '13 at 13:36
i test on iOS Simulator safari webWebview at the end MBillau. — sunmoon, Sep 10 '13 at 05:32

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Well it seems a is missing the one related to the "lists" div.

var extra_code = "extra code here";
document.getElementById('lists').append(extra_code);

this will append the extra code right before the second inner DIV.

Take a look at the append documentation for more examples. http://api.jquery.com/append/

Possible related/similar question, also helpful: Is it possible to append to innerHTML without destroying descendants' event listeners?

edited May 23 '17 at 12:05

Community

1
1

answered Sep 07 '13 at 01:56

VicM

2,449
1
18
20

code is appending VicM but after refreshing its look and feel changed mean, IMG went to centre, header went to right but this happens from 2nd
– sunmoon Sep 10 '13 at 04:25
@sunmoon Well it is possible that you need to refresh the CSS after modifying the DOM. You can use $('#DIV').trigger('create'); to refresh your DIV CSS or $('#your_list_ID').listview( 'refresh' ); to do the same trick but just focusing on the list. If that doesn´t work paste your code (html, js) to help you further. – VicM Sep 10 '13 at 20:30

Dynamically append ul to a div element

1 Answers1