如何使用innerHtml正确插入html
How to insert html with innerHtml correct?
我想在我的android WebView中使用ListView,我已经创建了json
来将我的变量发送到JavaScript
。它可以工作,但当我用innerHtml
附加html行时,我的页面如下,我在Inspect Element
上看不到任何错误
图像
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 Mobile如何处理新的HTML元素。JQuery Mobile动态添加属性标记。由于您在jQueryMobile之后加载HTML片段,所以可怜的jQueryMobile无法解析和修改它们。
您的解决方案是简单地在document.getElementById('dir_list').innerHTML = txt+"</ul>";
位之后添加$('#dir_list').enhanceWithin();
。就这么简单!这篇文章告诉jQueryMobile查看您的新HTML并对其进行处理
参考:http://demos.jquerymobile.com/1.0rc2/docs/pages/page-scripting.html
document.getElementById('dir_list').innerHTML = txt+"</ul>";
相关文章:
- 使用PHP插入HTML在JavaScript上不起作用
- 如何使用innerHtml正确插入html
- AngularJS指令,在元素后插入HTML
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 通过jQuery插入HTML不起作用
- 通过javascript以编程方式将文件插入HTML输入
- 在DIV中动态插入HTML并访问新元素
- 在所有元素中插入HTML
- 在其他图像下使用javascript将图像插入html
- 在工具提示Javascript中插入HTML
- 在HTML字符串的某个段落后插入HTML
- 可以插入在插入HTML标记之前
- 从 AngularJS 将文本插入 HTML
- 将 javascript 返回值插入 html
- 流路由器 - 将内容插入 HTML 模板
- 插入html时是否有触发事件的方法
- JavaScript-插入HTML的内容部分
- jquery多次在元素之间插入html
- 将当前年份插入HTML
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾