[置顶] 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>&nbsp;&nbsp;GPS监测点１</h3>
                        <p><font color=red>&nbsp;&nbsp;&nbsp;X 偏移1m超出正常范围</font></p>
                        <p><font color=red>&nbsp;&nbsp;&nbsp;安全级别:三级报警  请检查!</font></p>
       </a>
     </li>
     <li>
      <a href="" rel="external" style=" font-style:normal"><img src="images/渗流量.png" alt="渗流量" class="ui-li-icon" />
                        <h3>&nbsp;&nbsp;渗流量１</h3>
                        <p>&nbsp;&nbsp;&nbsp;<font color=red>流量:23 超出正常范围</font></p>
                        <p>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;浸润线２</h3>
                        <p><font color=red>&nbsp;&nbsp;&nbsp;降深值3 超出正常范围</font></p>
                        <p><font color=red>&nbsp;&nbsp;&nbsp;安全级别:危险 请检查!</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');

效果立马就出来啦