jQuery append text

Question

I want to append some simple data in a div like:

$('#msg').append('Some text'); 

In the body, i think i will need to place the the html like.

<div id="test">      <div id="msg"></div>  //show text inside it.  </div> 

However, I want to add some CSS to the #msg. For example, background color. Now the problem is that, since the #msg div is present all the time, i see the background color even when the text is not appended to it. I have tried to add css like "display:none, but in that case i can not see the text appended to it. Can i do it so that the #msg div appears inside the #test only when the text is appended to it? Thanks.

Answer 1

The proper way to append text (constrast with appending HTML) would be:

var someText = "Hello, World!"; $('#msg').append(document.createTextNode(someText)); 

If someText is coming from user input or anything else, it will be properly HTML-escaped. Which should prevent JavaScript injection, the 3rd most common web security vulnerability in the world.

From https://stackoverflow.com/a/944456/122441

Answer 2

Why not use

$('#msg').html('A styled <span style="background: yellow">paragraph</span>'); $('#msg').show(); 

Escape when needed.