Question

修改

我不明白为什么人们在没有真正尝试问题的情况下投票。我会重写一个问题，试图更清楚地解释我的自我。对不起，如果我不正确地解释我的自我。

我有一个简单的hello world页面：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div id="c">

        <div data-role="page">
            <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div>
            <br />  <br />

            <div data-role="Number">
                <p>
                    <h1 style="text-align: center; font-size: 310%;">
                        Hello Wold</h1>
                </p>
            </div>            
        </div>

    </div>
</body>
</html>

，它呈现如下：

enter image description here

（这就是为什么我将它标记为jquery我想要jquery的外观和感觉）

注意页面呈现正常。问题是我想动态放置那个html。我在ajax的帮助下得到了内容：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div id="c">
        <!-- Content will be replaced -->               
    </div>

<script type="text/javascript">

    $.ajax({
        url: 'someUrl',
        success: function (result) {

            // result should equal =
            result= '<div data-role="page"> <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div> <br /> <br /> <div data-role="Number"> <p> <h1 style="text-align: center; font-size: 310%;"> Hello Wold</h1> </p> </div> </div>';
            $('$c').append( result );

        } 
    });



</script>

</body>
</html>

如果我跑的话没什么渲染！我想知道哪个jquery函数负责样式化html。一旦我的ajax响应恢复，我想再次执行它。

Answer 1

我认为真正的问题是你不能在<script>之外/之后有<html>块。尝试在</body>之前将其移至右侧。

除非您确实希望它在运行代码之前等待一段时间，否则不需要setTimeout。

重要的是，您需要在 <div id="c">元素之后运行代码。这可能意味着在它之后，或在<body>结束时。在您的情况下，您的页面非常简单，并且紧随其后＃34;与<body>＆＃34;。

的＆＃34;结尾相同
尽管如此，您需要在<script>内部<html>，最好在<head>或<body>内（我已经看到它工作时）放在<head>和<body>之间，但我不建议这样做。

正如一个建议，既然你正在使用jQuery，你也可以利用它的DOM操作。不要使用DOMElement.innerHTML =，而是尝试使用jQuery选择器按ID（#）及其.html()方法进行选择：

var htmlContent = '<div data-role="page"> <div data-role="header"> <h1 style="font-size: 150%;"> My Title </h1></div> <br /> <br /> <div data-role="Number"> <p> <h1 style="text-align: center; font-size: 310%;"> Hello Wold</h1> </p> </div> </div>'; $("#c").html(htmlContent);

使用.html()并不总是正确的选择，但应该适合您，因为您只是包含HTML。另一种选择是使用.append(htmlContent)。

使用jQuery动态创建hello world页面不起作用

修改

，它呈现如下：

1 个答案: