JavaScript: Append ребенка со стилем и петлей

Question

мне нужно добиться следующего:

<ul data-role="listview"> 
<li data-icon="false"> 
<!--loop content here--> 
</li> 
</ul> 

с помощью JavaScript. Я думаю, что добавить ребенка будет трюк. Можете ли вы рассказать мне, как использовать appendchild для достижения этого результата? я попробовал следующее:

$(document).ready(function() { 
$(document).bind('deviceready', function() { 
    //Phonegap ready 
    onDeviceReady(); 
}); 


//var output = document.getElementById("output"); 
var _ul = document.createElement('ul'); 
var _li= document.createElement('li'); 
_ul.setAttribute("data-role", "listview"); 
_li.setAttribute("data-icon", "false"); 

$.ajax({ 
    url: 'json_encoded_db.php', 
    dataType: 'jsonp', 
    jsonp: 'jsoncallback', 
    timeout: 5000, 
    success: function(data, status){ 
     $.each(data, function(i,item) { 

      _li.innerHTML = 
      '<a href="" id="'+item.id+'">'+ 
      '<img src="images/'+item.img+'">'+ 
      '</a>'; 

      _ul.appendChild(_li.cloneNode(true)); 
     }); 

    }, 
    error: function(){ 
     output.text('There was an error loading the data.'); 
    } 
}); 
document.getElementById("output").appendChild(_ul); 
}); 

, но это не работает, я имею в виду, это список без какого-либо стиля и, видимо, не получает свойства данных ролей. (очевидно, что он работает с получением данных из базы данных, я тестировал его).

Answer 1

переместите этот код в свой $ .each() вашего successCallback. Так что ваши $ .each() будет выглядеть следующим образом:

$.each(data, function(i,item) { 
    var _li= document.createElement('li'); 
    _li.setAttribute("data-icon", "false"); 
    _li.innerHTML = 
     '<a href="" id="'+item.id+'">'+ 
     '<img src="images/'+item.img+'">'+ 
     '</a>'; 

     _ul.appendChild(_li); 
}); 

также избавиться от клонирования «_li»