Listview 动态地将ul附加到div元素

我试图动态附加列表视图（从ul---ul）不起作用。我正在使用jqm1.3.0&phonegap2.4.0代码如下

    <div data-role="content" id='lists'>
    <div style="background-color:rgb(248,248,248);" >

        <ul data-role="listview" data-inset="true" data-theme='d' style="-webkit-border-radius:5px;">

            <li data-icon='false'><a ><p style='position:absolute;left:70px;top:10px;right:3px;bottom:3px;font-size:16px;'><b>Abc Blog</b></p><p style='position:absolute;left:70px;top:30px;right:3px;bottom:3px;font-size:13px;'><i>By: </i><b>xyz</b>  <i>4 days ago</i></p><p style='position:absolute;left:70px;top:50px;right:3px;bottom:3px;font-size:13px;'>5 Likes - 3 comments</p><img src="http://172.16.6.54/elgg/mod/profile/icondirect.php?lastcache=1373278757&joindate=1360321536&guid=43&size=medium" class='custom-image' style='position:absolute;left:3px;top:3px;right:3px;bottom:3px;max-height:60px;max-width:60px'/></a></li>
            <li style='height:20px' data-icon='false' data-theme='c' >
                <table border="0" width='100%' valign="top">
                    <tr style='height:20px'>
                        <td width='50%' align='middle' onclick='javascript:likeClicked();'>
                            <img src="img/unlike.png" style='max-height:20px;max-width:20px' />
                        </td><td>|</td>
                        <td width='50%' align='middle' onclick='javascript:likeClicked();'>
                            <img src="img/like.png" style='max-height:20px;max-width:20px' />
                        </td>

                    </tr>
                </table></li>

        </ul>

</div>
   <script>
        function addList()
{
              var div = document.getElementById('lists');
              list = "same code in from <ul -- /ul> as there above";
              div.innerHTML  =list + div.innerHTML;

              $("ul").listview();

}

Abc博客
作者：xyz 4天前
5个喜欢-3个评论

|


函数addList（）
{
var div=document.getElementById（'lists'）；
list=“与上述代码相同的代码”；
div.innerHTML=list+div.innerHTML；
$（“ul”）.listview（）；
}

---

非常感谢。

看来a缺少了与“列表”div相关的一个

这将在第二个内部DIV之前追加额外的代码

有关更多示例，请参阅append文档。

---

可能的相关/类似问题，也很有帮助：

您正在测试什么设备？你有日志信息吗？JQM的其他部分工作吗？（你认为选择器可以让我们知道JQM已经成功加载到页面上了吗？）我知道高级功能（CSS转换等）在Android上不起作用，因为Cordova使用的AndroidWebView运行的是一个过时的WebKit（想想IE6）版本。然而，似乎使用

innerHTML

仍然可以工作…我在iOS模拟器safari WebView上测试MBillau结尾处。代码添加了VicM，但在刷新其外观和感觉后，平均值发生了变化，IMG移到中间，标题移到右边，但这种情况从第二个开始出现，第一种方法可以很好地工作。@sunmoon很可能在修改DOM后需要刷新CSS。您可以使用$（'#DIV'）.trigger（'create'）；刷新您的DIV CSS或$（'#您的_列表_ID'）。listview（'refresh'）；做同样的把戏，但只关注列表。如果这不起作用，请粘贴您的代码（html、js）以进一步帮助您。

var extra_code = "extra code here";
document.getElementById('lists').append(extra_code);