JQuery Mobile добавить элемент списка

Question

Мне интересно, что я делаю неправильно ..

У меня есть эта ул:

<ul id="songlist" data-role="listview" data-divider-theme="b" data-inset="true"> 
<li data-role="list-divider" role="heading"> 
    Crowdlist 
</li> 

и эту функцию для добавления элемента списка:

function insertItem(myid,position,newListItem) { 
    var ul = document.getElementById(myid); 
    var li = document.createElement("li"); 
    li.innerHTML=newListItem; 
    ul.insertBefore(li, ul.getElementsByTagName("li")[position]); 
    } 

, вызывающий такую ​​функцию:

добавляет элемент списка, но не выглядит как список элементов JQuery я могу добавить с

<li data-theme="c">dewf</li> 

я просто не могу понять это .. надеюсь, что кто-то может помочь мне.

Спасибо!

Answer 1

Необходимо обновить представление списка после того, как вы динамически загрузите его. После того, как вы вставили данные в listview, triggercreate на вашем page:

$("[data-role=page]").trigger("create"); 

EDIT

На основе этой проблемы вы столкнулись, я думаю, что refresh разве правильное решение для вас. Вы не можете добавить атрибут data-theme в li. Вы должны добавить его в ul (li).

Демонстрация: Javascript Version.

Я старался как можно больше придерживаться JS. Но почему? Вы включаете jQuery и jQuery mobile, почему бы не использовать его, когда у вас есть это? Если вам нужно решение jQuery, посмотрите на эту версию своего решения.

Демонстрация: jQuery Version.