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>

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

1 个答案: