Javascript - 元素的 CSS 样式在附加时不显示

Question

我在 javascript 中遇到有关将值附加到元素的 innerHTML(特别是 div 元素)的问题。问题是，每次我将值附加到元素的 innerHTML 时，附加值的 CSS 样式都不会显示。例如，当我运行这个脚本时:

    <script>
        var content=<?php

        echo json_encode("
        <table>
            <tr>
                <td>HELLO</td>
            </tr>
        ");

        ?>;

        document.getElementById("div").innerHTML=content;
    </script>

    //followed by this script which appends values
    //the script below does not show CSS style

    <script>
        var content=<?php

        echo json_encode("
            <tr>
                <td>HI</td>
            </tr>
            </table>
        ");

        ?>;

        document.getElementById("div").innerHTML+=content;
    </script>

我添加了这张图片以进一步阐述我在说什么。

上图中使用的CSS样式:

    table
    {
        border-collapse:collapse;
        width:100%;
    }

    th
    {
        background-color:#8a855f;
        padding:3px;
        text-transform:uppercase;
        text-align:center;
        border:1px solid #686440;
        color:#edebdc;
    }

    td
    {
        background-color:#d1cebd;
        padding:3px;
        text-align:center;
        border:1px solid #686440;
        color:#686440;
    }

Answer 1

因为是自动取收尾</table>标签。查看控制台并检查元素，您会发现问题。

我建议您首先将所有值附加到 var content 中然后将该值设置为 div 的 innerHTML。

<script>
    var content=<?php

    echo json_encode("
    <table>
        <tr>
            <td>HELLO</td>
        </tr>
    ");

    ?>;


</script>

//followed by this script which appends values
//the script below does not show CSS style

<script>
    content +=<?php

    echo json_encode("
        <tr>
            <td>HI</td>
        </tr>
        </table>
    ");

    ?>;

    document.getElementById("div").innerHTML=content;
</script>