Javascript JS和HTML不同的页脚渲染

我正在创建一个JQuery移动站点，它使用Javascript注入一个页脚（下面的代码只显示注入HTML div的最终HTML，而不是创建HTML的过程）

我遇到的问题是，当我通过将代码放置在HTML

div

中来添加HTML时，JQuery Mobile页脚会正确呈现，但是，如果我使用Javascript的

innerHTML

变量加载页脚，页脚会扭曲。你知道为什么会这样吗

最终确定的页脚HTML：

<footer data-role="footer" data-id="navFooter" data-position="fixed">
    <nav data-role="navbar" class="nav-footer">
        <ul>
            <li><a href="" id="LandmarksTab" class="ui-btn-active ui-state-persist" data-icon="custom">Landmarks</a>
            </li>
            <li><a href="" id="MoreTab" data-icon="custom">More</a>
            </li>
        </ul>
    </nav>
</footer>

示例代码：

通过Javascript放置的页脚：

---

通过HTML放置的页脚：

如果对刚接收到新内容的元素（div）调用

.enhanceWithin（）

$('#bottomTabBar').enhanceWithin();

原因是jQM在加载页面后增强了页面。处理此问题的最佳方法是使用onpagebeforecreate事件，或者如果要向已创建的页面动态添加内容，请使用enhanceInside（）方法

孩子，这里的人都很快。无论如何，我会发布我的答案，因为它有更多的信息和pagebeforecreate的备选选项。
10分钟。。。我正在寻找一个解决这个问题的办法。GJ:）哪个职位？它已经有了解决方案；）这是解决方案谢谢你的发帖，这个答案非常有效。有人知道为什么需要这个吗？这就是jQM的工作原理。无论何时添加新内容，都必须以这种方式更新布局。感谢您发布有关增强功能的信息。
$（“[data role=footer]”。toolbar（）是您所需要的。