Javascript 如何使用innerHtml正确插入html？_Javascript_Android_Html_Jquery Mobile_Android Webview

Javascript 如何使用innerHtml正确插入html？

javascript android html jquery-mobile

Javascript 如何使用innerHtml正确插入html？,javascript,android,html,jquery-mobile,android-webview,Javascript,Android,Html,Jquery Mobile,Android Webview,我想在我的android WebView中使用，我已经创建了json来将我的变量发送到JavaScript。它可以工作，但当我用innerHtml附加html行时，我的页面如下所示，我看不到Inspect元素上有任何错误 Html代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" charset="ut

我想在我的android WebView中使用，我已经创建了

json

来将我的变量发送到

JavaScript

。它可以工作，但当我用

innerHtml

附加html行时，我的页面如下所示，我看不到

Inspect元素上有任何错误

Html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body onLoad="getDir()">
<div data-role="page" id="pageone" style="float:right !important">
  <div data-role="main" class="ui-content" id="dir_list">
  </div>
</div> 

<div data-role="page" id="download" data-dialog="true">
  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">حذف</a>
    <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">تغییر نام</a>
  </div>
</div> 
<script>
    function fill_dir()
    {
        return AndroidFunction.list();
    }
    //-------------------
    function getDir()
    {
        var text = fill_dir();
        //alert(text);
        document.getElementById('dir_list').innerHTML = "";
        var obj = JSON.parse(text);
        var txt = "<ul data-role=\"listview\" data-inset=\"true\">";
        for (i = 0; i < obj.List.length; i++)
        {
            txt += "<li><a href=\"#\"><img src=\"images/letter2.png\"><h2>"+obj.List[i].DIR+"</h2></a><a href=\"#download\" data-transition=\"pop\" data-icon=\"gear\">Download Browser</a></li>";
        }
        document.getElementById('dir_list').innerHTML += txt+"</ul>";
    }
</script>
</body>
</html>


函数fill_dir（）
{
返回AndroidFunction.list（）；
}
//-------------------
函数getDir（）
{
var text=fill_dir（）；
//警报（文本）；
document.getElementById（'dir_list'）。innerHTML=“”；
var obj=JSON.parse（文本）；
var txt=“”；
对于（i=0；i”；
}
document.getElementById（'dir_list'）。innerHTML+=txt+“”；
}
document.getElementById（'dir_list'）。innerHTML=txt+“”；
问题在于jQuery Mobile如何处理新的HTML元素。jquerymobile动态添加属性标记。由于您在jQuery Mobile之后加载HTML片段，可怜的jQuery Mobile无法解析和修改它们
您的解决方案是简单地添加$（'#dir_list'）。enhanceWithin（）
就在document.getElementById（'dir_list'）之后。innerHTML=txt+“”位。就这么简单！这告诉jquerymobile查看新的HTML并对其进行处理
REF:
因为您使用的是jQuery，所以请使用$（“#dir_list”）.html（txt+””）
@Satpal:是的。这是jQueryMobile，我使用您的行，但什么都不用change@Satpal：当我附加
手动操作可以，但当我自动插入所有内容时，请帮我一个忙，你能粘贴一个var text=fill_dir（）的示例吗？@Drakes:{“List”：[{“DIR”：“name1”}，{“DIR”：“name2”}，{“DIR”：“name3”}}
document.getElementById('dir_list').innerHTML = txt+"</ul>";