innerHTML搭配jquery mobile的list view

用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’);

資料來源:http://stackoverflow.com/questions/15885863/dynamically-populating-li-within-jquery-mobile-data-role-listview

Jquery Mobile教學範例:http://w3schools.com/jquerymobile/default.asp

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料