用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