使用javascript在phonegap中向div追加div

我正在学习使用phonegap开发应用程序。我的问题是，在追加div时，它没有显示出它应该显示的内容

这是我的部分代码

<div data-role="content" id="contenido">
    <div data-role="collapsible-set" id="tareas">

    <div data-role="collapsible" id="tarea_1">'+
        '<h3>Tarea 1</h3>'+
        '<a class="ui-btn-a ui-btn ui-btn-icon-right ui-icon-carat-r" data-form="ui-btn-up-a" data-swatch="a" data-theme="a" href="#">Descripcion</a>        </div>

    </div>             
 </div>

'+
“跗骨1”+
'        

这个可折叠的“tarea_1”，如果我将它添加到HTML中，它将显示如下

但是当我用这个代码附加它时：

$('#tareas').append('<div data-role="collapsible" id="tarea_1">'+
        '<h3>Tarea 1</h3>'+
        '<a class="ui-btn-a ui-btn ui-btn-icon-right ui-icon-carat-r" data-form="ui-btn-up-a" data-swatch="a" data-theme="a" href="#">Descripcion</a>          </div>').listview('refresh');

$（'tareas'）。附加（'+
“跗骨1”+
''）.listview（“刷新”）；

这就是我得到的

我认为这是因为刷新，但我不知道如何解决它

您需要使用“.collapsableset（'refresh'）；”而不是“.listview（'refresh'）”

看这个例子

工作

$（'document'）.ready（函数（）{
$（'#tareas'）.append（“Tarea 1”）.collapsableset（'refresh'）；
});

   $('document').ready(function(){
  $('#tareas').append("<div data-role='collapsible' id='tarea1'><h3>Tarea 1</h3></div>").collapsibleset('refresh'); 
});