用innerHTML把文字插入網頁中的功能很好用,但是如果是插在jquery mobile的list view裡面,因為多了一個div的標籤,list view就會不見,所以應該把id寫在ul的標籤裡,用+=的方式插入內容。
例如以下程式:
<head> <script> function init() { msg = "<li> <a href=> New List Item </a></li>"; document.querySelector('#add_item').innerHTML += msg; } // call init on load window.addEventListener('load',init,false); </script> </head> <body> <div id='main' data-role='page' data-theme='c'> <div data-role='header'> <h1>Welcome!</h1> </div> <div id='content' data-role='content'> <ul data-role="listview" id="list_cars"> <div id="add_item"> </div> <li> <a href=""> List Item 1</a></li> <li> <a href=""> List Item 1</a></li> </ul> </div> <div data-role='footer'> <h4>Enjoy reading the book ...</h4> </div> </div> <!-- End of Min page --> </body>
第5行msg的字串會插入到第21、22行的div標籤之間,但是沒辦法呈現jquery mobile的list view樣式。
建議第6行改成:
document.querySelector(‘#list_cars’).innerHTML += msg;
這個#list_cars是寫在ul標籤裡面的id,意思就是msg這個字串會疊加到ul這個標籤的內容下面。
如果要讓msg的內容出疊加到ul這個標籤內容的最上面,建議第6行改成:
document.querySelector(‘#list_cars’).innerHTML = msg + document.querySelector(‘#list_cars’).innerHTML;
最後再加一行指令讓網頁內的list view更新:
$(‘#list_cars’).listview(‘refresh’);
Jquery Mobile教學範例:http://w3schools.com/jquerymobile/default.asp