jquery Mobile 框架下添加新的Dom元素

最近在做移动端web开发

要在一个Ul 节点下添加一个li节点

ul代码如下

<ul id="AlarmList" data-role="listview" data-inset="true" data-theme="c" >
<li>
<a href="" rel="external" style=" font-style:normal"><img src="images/GPS监测站.png" alt="GPS表面位移" class="ui-li-icon" /> <h3>  GPS监测点１</h3>
<p><font color=red>   X 偏移1m超出正常范围</font></p>
<p><font color=red>   安全级别:三级报警 请检查!</font></p>
</a>
</li>
<li>
<a href="" rel="external" style=" font-style:normal"><img src="images/渗流量.png" alt="渗流量" class="ui-li-icon" />
<h3>  渗流量１</h3>
<p>   <font color=red>流量:23 超出正常范围</font></p>
<p>   <font color=red>安全级别:三级报警 请检查!</font></p>
</a>
</li>
<li>
<a href="" rel="external" style=" font-style:normal"><img src="images/浸润线.png" class="ui-li-icon" /> <h3>  浸润线２</h3>
<p><font color=red>   降深值3 超出正常范围</font></p>
<p><font color=red>   安全级别:危险 请检查!</font></p>
</a>
</li>
</ul>

我添加一个li节点

???? var str = "<li id=\"li1\"><a href=\"\" rel=\"external\" style=\" font-style:normal\"><img src=\"images/浸润线.png\" /><h3>  GPS监测点１</h3><p><font color=red>   X 偏移1m超出正常范围</font></p><p><font color=red>   安全级别:三级报警  请检查!</font></p></a></li>";                 $("#AlarmList").append(str);                 $("#li1 img").addClass("ui-li-icon");

但这样图片出不来啦，真的很纠结

效果如下

太难看啦

加上一行代码

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

效果立马就出来啦