How can I create a reusable HTML string object?

How can I create a reusable string for my HTML web page?

I would like the following line of HTML to be reusable as a small string "object" throughout my web pages:

[<span class="sgreentxt">root</span>@<span class="sbluetxt">localhost</span> <span class="sorangetxt">~ </span>]

Which would be "[root@localhost ~ ]" as interpreted by the webrowser and displayed on the screen.

This object would be equivalent to "cli = [root@localhost ~ ]" so instead of typing that big long string of code I would instead only have to type something like "cli" and the html would recognize it as a javascript string printline or something and output the other code instead which would be interpreted as html and displayed appropriatly. How can I accomplish this and be able to do it multiple times through the same web page. Note: document.getElementById() only works once per web page.