jQuery Mobile add tab dynamically

addtab.html

<div data-role="tabs" id="tabs">
  <div data-role="listview" id="tabnav">
    <ul>
      <li><a href="#test">Test</a></li>
    </ul>
  </div>
</div>

addtab.js

function addTab(name, content){
  $('#tabnav ul').append('<li><a href="#' + name + '">' + name + '</a></li>');
  $('#tabs').append('<div id="' + name + '">' + content + '</div>');
  
  $('#tabs').tabs('refresh');
}

addTab('foo', 'bar');
$('#tabnav').navbar();