Adding list element in HTML using jQuery -
this question has answer here:
i trying use jquery add list item format has been used. however, first element (the top one) has right format 1 below (added after pressing "add entry") doesnt have same format. whole code below have extracted function creating entry.
<button onclick="myfunction()">add entry</button> <script> function myfunction() { $("#mylist").append('<ul data-role="listview" data-input="#myfilter" data-inset="true"><li id="contact1"><a href="#">testcontact</a></li></ul>'); } </script> the whole code:
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="panel" id="contactpanel"> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">home</a> <form class="ui-filterable"> <input id="myfilter" data-type="search"> </form> <ul data-role="listview" data-filter="true" data-input="#myfilter" data-autodividers="true" data-inset="true"> <li><a href="#">adele</a></li> <li><a href="#">agnes</a></li> <li><a href="#">albert</a></li> <li><a href="#">billy</a></li> <li><a href="#">bob</a></li> <li><a href="#">calvin</a></li> <li><a href="#">cameron</a></li> </ul> </div> <div data-role="panel" id="dialpanel" data-position-fixed="true"> <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">home</a> <h2>dial number</h2> <p>you can close panel clicking outside panel, pressing esc key, swiping, or clicking button below:</p> </div> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">☰</a> <h1>chapar</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right">search</a> <!-- </div> <div data-role="main" class="ui-content"> <a href="#contactpanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">contacts</a> <a href="#mypanelfixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">dial pad</a> </div> --> <!--buttons --> <div data-role="navbar"> <ul> <li><a href="#contactpanel" data-icon="search">contacts</a></li> <li><a href="#dialpanel" data-icon="search">dial pad</a></li> <li><a href="#" data-icon="info">help</a></li> </ul> </div> <!-- recent contacts--> <div id="mylist"> <ul data-role="listview" data-input="#myfilter" data-inset="true"> <li id="contact1"><a href="#">testcontact</a></li> </ul> </div> <button onclick="myfunction()">add entry</button> <script> function myfunction() { $("#mylist").append('<ul data-role="listview" data-input="#myfilter" data-inset="true"><li id="contact1"><a href="#">testcontact</a></li></ul>'); } </script> <div data-role="footer"> <h1>page footer</h1> </div> </div> </body> </html>this how looks: 
you can use clone() function exact copy of list , append parent element.
function myfunction() { var clone = $("#mylist ul:first").clone(); $("#mylist").append(clone); } 
Comments
Post a Comment