css - Passing Javascript from .js file to head of HTML file and have it read as HTML code -

i have javascript file finds out cycle of moon , picks 2 current moon images put on web page background images. got work fine images, design needs them appear in css format "background-image". when move code head (originally in body) of html file prints code text on page.

the .js file says this:

n="body {background-image: url('../moon/n"+moonday+".png') no-repeat right top;}" r="body {background-image: url('../moon/r"+moonday+".png') no-repeat right bottom;}" 

the html file says this:

<script src="moon/mooncycle.js"></script> <script language="javascript" type="text/javascript">document.write(n)</script> <script language="javascript" type="text/javascript">document.write(r)</script> </head> 

how hmtl file read print out (which showing this... http://www.dragonfly-design.net/2012/index.html )

thank can give me!

a better way have stylesheet 1 css declaration each day:

body.moon1 {      background-image: url('../moon/n1.png') no-repeat right top; } 

... etc....

then in js, change class on body tag.

put @ bottom of page ensure page has loaded before executing (there better ways this, simple one):

<script type="text/javascript"> document.body.setattribute("class","moon"+moonday); </script> 

one clean line of code allows separate styling html, allowing use external stylesheet.