通过Javascript创建HTML时的样式设置不同

当我用HTML编写代码和用javascript编写代码时，列表项的形状是不同的。以下是我的HTML代码：

<div data-role="content" id="list">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
        <li data-role="list-divider">Overview</li>
        <li>
            <a href="#">
                <img src="resources/images/th.jpg">
                <h1 class="the-header">Thailand </h1>
                <p class="the-paragraph">
                    Mauris sit turpis, proin est elementum, vel augue.
                </p>
            </a>
        </li>
    </ul>
</div>

概述

结果：

下面是我的javascript代码：

<script>
    $(document).ready(function () {
        document.getElementById("list").innerHTML += ('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a" ><li data-role="list-divider">Overview</li><li><a href="#"><img src="resources/images/th.jpg"><h1 class="the-header"> Thailand  </h1><p class="the-paragraph">Mauris sit turpis, proin est elementum, vel augue</p></a></li></ul>');
    });
</script>

$（文档）.ready（函数（）{
document.getElementById（“list”）.innerHTML+=（'ul data role=“listview”data inset=“true”data theme=“c”data divider teme=“a”>
概述
）；
});

结果：

$（文档）.ready（函数（）{
document.getElementById（“list”）.innerHTML+=（'ul id=“myID”data role=“listview”data inset=“true”data-theme=“c”data divider teme=“a”>
概述；
$（'#myID'）.listview（）.listview（'refresh'）；
});

---

无论代码是否真的修复了问题，代码中都有一些地方需要更改：

• ID只能使用一次。类可以重用。请 将您的

  列表

  和其他ID更改为

  类

  ，以便您可以创建 多个元素，并在一把伞下设计它们的样式
  • 由于您是动态添加内容的，因此可以尝试在添加内容后再次加载CSS文件

  if（！document.getElementById）document.write（“”）
  

---

如果这些建议不起作用，请创建一个

JSFIDDLE

，这样我们可以重现问题。

如果需要澄清问题，请使用“编辑”链接，而不是注释。“形状”有什么不同？Javascript不插入换行符和制表符，如果这是你的意思的话？我怀疑你有一个小部件，它可以根据

数据角色

，

数据主题

等重新格式化元素。你需要在添加元素后调用它。它似乎没有读取ul“data role=“listview”data inset=“true”data theme=“c”的属性“data dividertheme=“a”是真的吗？不知道您使用的是什么小部件，我无法回答。很抱歉，它工作正常。非常感谢。

<script>
$(document).ready(function () {
    document.getElementById("list").innerHTML += ('<ul id="myID" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a" ><li data-role="list-divider">Overview</li><li><a href="#"><img src="resources/images/th.jpg"><h1 class="the-header"> Thailand  </h1><p class="the-paragraph">Mauris sit turpis, proin est elementum, vel augue</p></a></li></ul>');

    $('#myID').listview().listview('refresh');
});