JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<div id="home" data-role="page">
<div data-role="header" data-theme="b">
<h4>Home</h4>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a id="item_1" href="item.php?item=1">
<h3 class="ui-li-heading">Initial item</h3>
<p class="ui-li-desc">This is here from the start.</p>
</a>
</li>
</ul>
</div>
</div>
JavaScript
var items = [
{
'id': 2,
'title': 'Some item',
'desc': 'This is something.'
},
{
'id': 3,
'title': 'An added item',
'desc': 'Another item!'
}
];
var $listElem = $('#home').find('ul');
$.each(items, function(i, item) {
$('<li />').append(
$('<a />').attr('id', 'item_' + item.id).attr('href', 'item.php?item=' + item.id).append(
$('<h3 />').text(item.title).addClass('ui-li-heading'),
$('<p />').text(item.desc).addClass('ui-li-desc')
)
).appendTo($listElem).trigger('create');
});