Q:

Jquery DOM Manipulation Somenthing better than that?

I'm trying to figure out to apply a better approach to improve the code bellow 
with a more elegant use of jquery selectors.
My problem is that I have a different user messages to show for the user in a specific 
div across many pages of my application and I'm selecting the desirable selector and them 
change the message in the desirable element according the value of the some value as
is showed bellow:
/*Javascript*/ 

if (var == value) {
            msg = "Msg 1 <br>";
            msg = msg + "msg 1 continue... &nbsp;<br>"
} else if (var == value2) {
            msg = "Msg 2 <br>";
            msg = msg + "msg 1 continue... &nbsp;<br>"
}

if(msg != "") {
   document.getElementById('IdSelector').style.display = 'block';
   document.getElementById('IdSelector').innerHTML=msg;
}

And my html5 is showed bellow:
<div> id="IdSelector" class="classMsg">&nbsp;</div>

How is the better approach, template engine or strategy to deal with this without 
suck.
I need some effective code examples, please and thanks very much.

A:

You can add a data-id attribute to your html elements like so:
<div data-id="1" class="classMsg">&nbsp;</div>

And then in your JavaScript code, do something similar to what Chris recommended, such as:
$('.classMsg').each(function(_, element) 
{
    var dataID = $(element).attr('data-id');

    switch(dataID)
    {
        case 1:
            element.css('display', 'block').html('Message 1');
            break;
        case 2:
            element.css('display', 'block').html('Message 2');
            break;
        ...
    }
});

