Jquery mobile 附加a时，HTML5元素显示不正确<；李>；到<；ul>；

我的网页显示有问题。我使用了一个无序的列表，里面有一个项目。但是在无序列表被javascript代码生成的项目添加后，它们以错误的方式出现，并且不遵循无序列表的css规则

另外，我正在使用jquery mobile 1.4.2 css和js

这是html代码：

<div id="all" class="ui-body-d ui-content">
                <ul id="allList" data-role="listview" >
                    <li><a href="#">1Data Mining</a></li>
                    <li><a href="#">1Ethics</a></li>
                    <li><a href="#">1HCI</a></li>
                    <li><a href="#">1Mobile Dev</a></li>
                    <li><a href="#">1Software Testing</a></li>
                </ul>
            </div>

这是在列表中插入新项的javascript代码

function getDeadlines_success(tx, results){

var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
    var deadline = results.rows.item(i);

    $('#allList').append('<li><a href="#">1Software Testing</a></li>');
}
;}

函数获取最后期限\u成功（发送、结果）{
var len=results.rows.length；
//var s=“”；
对于（var i=0；i请下次使用Google或stackoverflow搜索功能

对我来说第一个打击是：

$（'ul'）。追加（$（'
'，{//此处追加`
`
“数据角色”：“列表分隔符”
}).append（$（''，{//此处将``追加到`
`
'href'：'test.html'，
“数据转换”：“幻灯片”，
“文本”：“你好”
})));
$（'ul'）.listview（'refresh'）；

最后一行（刷新）对于jQuery Mobile再次布局UI控件非常重要。
我不确定所有jQuery控件都需要它，但我确定这一个：）

Stefan.
下次请使用谷歌或stackoverflow搜索功能

对我来说第一个打击是：

$（'ul'）。追加（$（'
'，{//此处追加`
`
“数据角色”：“列表分隔符”
}).append（$（''，{//此处将``追加到`
`
'href'：'test.html'，
“数据转换”：“幻灯片”，
“文本”：“你好”
})));
$（'ul'）.listview（'refresh'）；

最后一行（刷新）对于jQuery Mobile再次布局UI控件非常重要。
我不确定所有jQuery控件都需要它，但我确定这一个：）

Stefan.
尝试刷新列表视图

$("#all").listview('refresh');

尝试刷新列表视图

$("#all").listview('refresh');

下面是代码的JSFIDLE：

编辑：替代解决方案（根据许多人的建议）：

$（“按钮”#btn”）。单击（功能（）{
$（'#allList'）。追加（'
'）；
$（“#所有列表”）.listview（‘刷新’）；
});



您粘贴的标记不是渲染后生成的标记，它实际上比渲染后生成的标记更混乱：

<div id="all" class="ui-body-d ui-content">
  <ul id="allList" data-role="listview" class=" ui-listview">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Data Mining</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Ethics</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1HCI</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Mobile Dev</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Software Testing</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
  </ul>
</div>










要将项目添加到此列表并保留样式，您必须按照以下答案执行类似操作：

$（'ul'）。追加（$（'
'，{//此处追加`
`
“数据角色”：“列表分隔符”
}).append（$（''，{//此处将``追加到`
`
'href'：'test.html'，
“数据转换”：“幻灯片”，
“文本”：“你好”
})));
$（'ul'）.listview（'refresh'）；
下面是一个包含您的代码的JSFIDLE：

编辑：替代解决方案（根据许多人的建议）：

$（“按钮”#btn”）。单击（功能（）{
$（'#allList'）。追加（'
'）；
$（“#所有列表”）.listview（‘刷新’）；
});



您粘贴的标记不是渲染后生成的标记，它实际上比渲染后生成的标记更混乱：

<div id="all" class="ui-body-d ui-content">
  <ul id="allList" data-role="listview" class=" ui-listview">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Data Mining</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Ethics</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1HCI</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Mobile Dev</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Software Testing</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
  </ul>
</div>










要将项目添加到此列表并保留样式，您必须按照以下答案执行类似操作：

$（'ul'）。追加（$（'
'，{//此处追加`
`
“数据角色”：“列表分隔符”
}).append（$（''，{//此处将``追加到`
`
'href'：'
$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');