将 ul 动态附加到 div 元素答案

【问题标题】：Dynamically append ul to a div element将 ul 动态附加到 div 元素
【发布时间】：2013-09-06 12:17:02
【问题描述】：

我正在尝试动态附加列表视图（来自 ul --- ul）不起作用。我正在使用 JQM 1.3.0 & phoneGap 2.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();

}

非常感谢。

【问题讨论】：

您在什么设备上测试？你有任何日志信息吗？ JQM 的其他部分是否有效？（是否认为选择器可以让我们知道 JQM 已成功加载到页面上？）我知道高级功能（CSS 转换等）不适用于例如 Android，因为 Cordova 使用运行过时的 AndroidWebView（想想 IE6） WebKit 版本。然而，使用innerHTML 似乎仍然可以工作......
我在最后 MBillau 的 iOS Simulator safari webWebview 上测试。

标签： listview jquery-mobile cordova

【解决方案1】：

好吧，似乎缺少与“列表”div相关的那个。

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

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

查看附加文档以获取更多示例。 http://api.jquery.com/append/

可能的相关/类似问题，也很有帮助：Is it possible to append to innerHTML without destroying descendants' event listeners?

【讨论】：

代码正在附加 VicM，但在刷新其外观和感觉后，意味着 IMG 居中，标题向右，但这发生在第二个
@sunmoon 好吧，您可能需要在修改 DOM 后刷新 CSS。您可以使用 $('#DIV').trigger('create');刷新你的 DIV CSS 或 $('#your_list_ID').listview('refresh');做同样的把戏，但只关注列表。如果这不起作用，请粘贴您的代码（html、js）以进一步帮助您。