Add complex HTML using jquery without using loop

<html>
<head> 
<script src="js.js">
</head>
<body> 
<script> $("#header").html("<br><br><br><table border=0><tr><td rowspan='2' width=100%><img src='start_font.JPG' width=256 height=80%></td><td align='right'><font face='Verdana' size=4 color=white><br>Harshal</font></td><td rowspan=2><img src='profile.jpg' width=55 height=55> </tr><tr><td align='right' valign='top'><font face='Verdana' size=3 color=white>Gajjar</font></td></tr></table>"); </script> 
<div id="header"></div> 
</body>
</html>

I have many pages on my site having the same code (in .html()), so want to create a .js file having the script, and a in all pages so the header can be edited from a single file. But unfortunately this script is not functioning.

Solution

Move <div id="header"></div> before the script that's supposed to modify it.

<html>
  <head> 
    <script src="js.js">
  </head>
  <body> 
    <div id="header"></div> 
    <script> $("#header").html("<br><br><br><table border=0><tr><td rowspan='2' width=100%><img src='start_font.JPG' width=256 height=80%></td><td align='right'><font face='Verdana' size=4 color=white><br>Harshal</font></td><td rowspan=2><img src='profile.jpg' width=55 height=55> </tr><tr><td align='right' valign='top'><font face='Verdana' size=3 color=white>Gajjar</font></td></tr></table>"); </script> 
  </body>
</html>