如何正确插入带有innerHtml的html？答案

【问题标题】：How to insert html with innerHtml correct?如何正确插入带有innerHtml的html？
【发布时间】：2015-04-09 09:50:50
【问题描述】：

我想在我的 android WebView 中使用ListView，并且我创建了json 来将我的变量发送到JavaScript。它可以工作，但是当我在html 行中附加innerHtml 时，我的页面如下所示，我可以'在Inspect Element 上看不到任何错误

Image

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>

【问题讨论】：

既然你用的是jQuery，那就用$('#dir_list').html(txt+"</ul>")
@Satpal : 是的。它是 jQueryMobile，我使用你的线路，但没有任何改变
@Satpal ：当我手动附加 <li> ... </li> 时，它工作正常，但是当我自动插入时，一切都被破坏了
帮个忙，你能贴一个var text = fill_dir();的样本吗？
@Drakes : {"List":[{"DIR":"name1"},{"DIR":"name2"},{"DIR":"name3"}]} uupload.ir/files/d7tb_capture1.png

标签： javascript android html jquery-mobile android-webview

【解决方案1】：

问题在于 jQuery Mobile 如何处理新的 HTML 元素。 JQuery Mobile 动态添加属性标签。由于您在 jQuery Mobile 之后加载 HTML 片段，因此糟糕的 jQuery Mobile 无法解析和修改它们。

您的解决方案是在document.getElementById('dir_list').innerHTML = txt+"</ul>"; 位之后简单地添加$('#dir_list').enhanceWithin();。就这么简单！这告诉 jQuery Mobile 查看您的新 HTML 并对其进行处理。

参考号：http://demos.jquerymobile.com/1.0rc2/docs/pages/page-scripting.html

【讨论】：

【解决方案2】：

document.getElementById('dir_list').innerHTML = txt+"</ul>";

【讨论】：