php - Javascript - CSS style for an element does not show when appended -

i have problem in javascript regarding appending of values element's innerhtml (specifically div element). problem is, everytime append value element's innerhtml, css style appended value not show. example, when run script:

    <script>         var content=<?php          echo json_encode("         <table>             <tr>                 <td>hello</td>             </tr>         ");          ?>;          document.getelementbyid("div").innerhtml=content;     </script>      //followed script appends values     //the script below not show css style      <script>         var content=<?php          echo json_encode("             <tr>                 <td>hi</td>             </tr>             </table>         ");          ?>;          document.getelementbyid("div").innerhtml+=content;     </script> 

i added picture further elaborate i'm talking about.

the css style used in image above:

    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;     } 

it because automatically taking closing </table> tag. see console , check elements, problem.

i suggest first append values in var content , set value innerhtml of div.

<script>     var content=<?php      echo json_encode("     <table>         <tr>             <td>hello</td>         </tr>     ");      ?>;   </script>  //followed script appends values //the script below not show css style  <script>     content +=<?php      echo json_encode("         <tr>             <td>hi</td>         </tr>         </table>     ");      ?>;      document.getelementbyid("div").innerhtml=content; </script>