[javascript] setting content between div tags using javascript

I'm trying to set some content in between some div tags on a JSP page using javascript.

currently the div tag on the JSP page looks like this:

<div id="successAndErrorMessages"></div>

I want to fill the content in those div tags using some javascript method so that it will look like so:

<div id="successAndErrorMessages"><div class="portlet-msg-error">This is an error message</div></div>

I know you can go like this:

document.getElementById("successAndErrorMessages").value="someContent";

But that just changes the value of the 'value' attribute. It doesn't fill in content between those div tags. Anyone out there that can point me in the right direction?

See Creating and modifying HTML at what used to be called the Web Standards Curriculum.

Use the createElement, createTextNode and appendChild methods.

If the number of your messages is limited then the following may help. I used jQuery for the following example, but it works with plain js too.

The innerHtml property did not work for me. So I experimented with ...

    <div id=successAndErrorMessages-1>100% OK</div>
    <div id=successAndErrorMessages-2>This is an error mssg!</div>

and toggled one of the two on/off ...

 $("#successAndErrorMessages-1").css('display', 'none')
 $("#successAndErrorMessages-2").css('display', '')

For some reason I had to fiddle around with the ordering before it worked in all types of browsers.