Tengo un problema con una lista <li> en html y lo relleno con una function javascript
La lista de los datos es corecta ma la presentacion es orrible los datos me lo pone uno debajo de otros.
No me da el listview normal
Código:
function inicio() {
$.getJSON('http://xxxxxxxx.tk/yyyyyyyy.php',function(data){
console.log(JSON.stringify(data));
var datos;
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append('<li> <a href="#page2"> <img src="http://xxxxxxxx.tk/imagen/'+data[i].NombreFotoCatalogo+'" width=100 /></a>'+
' <span><h2>'+data[i].Productos+'</h2> <p>'+data[i].NombreFotoCatalogo+'</p>'+
'<a href="#ofertas" data-rel="popup" data-position-to ="windows" data-transition="pop">Más Información" </a></span> </li>');
$('#lista').append(tr);
}
});
}
</script>
<body onload="inicio();">
etc..
<div data-role="content" align="center" data-theme ="a" > <img src ="imagen/fotos-inicio.png" class="img">
<ul data-role="listview" data-inset="true" data-split-icon="check" data-split-theme="e" data-theme="e" id="lista" >
<li data-role="list-divider" data-icon="star">Las tres Ofertas destacadas</li>
</ul>
<div data-role="content" align="center" data-theme ="c" >
</div>