HTML element to use as a Javascript message display

Question

I have a message display field on my website that I'd like to change the value of via JS.

I've been using just a textfield, disabling it, and modifying the value via a JS function (after using a little CSS to make it not look like a text field):

<input type="text" id="message" style="background: white; color: black" size="50" disabled>

There has to be a better way (for instance, formatting is tricky whenever the message runs over the specified size), but I can't think of it off the top of my head. Can anyone point me in a better direction? Thanks!

FYI: I am doing a timer function which I'd like to look something like "HH:MM:SS | 'my message here'"

Answer 1

You could just use a styled span and set it's innerHtml.

Answer 2

You can set the contents of any element with innerHTML. So instead of messing with a form input, you could just have this:

<div id="message"></div>

And set it via JavaScript like this:

document.getElementById('message').innerHTML = 'This message is awesome.';

And you would get this result:

<div id="message">This message is awesome.</div>

Answer 3

Using jQuery (I totally suggest using a framework like jQuery, to avoid cross-browser problems with innerHTML), this is reeeeeally simple:

<span id="timer"></span>
<script type="text/javascript">
  $("#timer").text("HH:MM:SS | your message here");
</script>

Answer 4

I'd use log4javascript, which has a console for log messages that can be placed in the main page or in a separate window.

Disclosure: I wrote it.