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节点
 
[html]  
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");  
但这样图片出不来啦，真的很纠结
 
效果如下
 

 
太难看啦
 
加上一行代码
 
[html] 
$("#AlarmList").listview('refresh');  
效果立马就出来啦

补充：web前端 , JavaScript ,