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.

Solution 1

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

Solution 2

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

Solution 3

Why not use

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

Escape when needed.

Comments

[sunjie]

Thanks. This works but just wondering how? The #msg div remains in the html, but how it doesnt apply the css unless the jquery uses show?

[Naftali]

@sunjie -- show() just removes the display: none and turns it to display: block

[usr]

This does not append text, it appends HTML. Big difference.

[Hendy Irawan]

Agree with @usr. If the "text" is coming from user input, this will cause JavaScript injection.

[rbhitchcock]

This should be the accepted answer. Thanks for posting this along with the explanation of why it's the correct way to safely append text to an element.

[Gui Imamura]

Would $('#msg').text( $('#msg').text() + 'Some text' ) be safer? According to the jQuery API, .text( [text] ) escapes the text with .createTextNode().

[AsgarAli]

Don't know why people are ranking negative to your answer. You have answered correctly.

[DevAntoine]

@AliKhanusiya Because .append() appends HTML and not text.

[DevAntoine]

@AliKhanusiya You maybe need to read it too: "content: DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements."

[Reporter]

The method .html() does replace the existing content by new one. I think the questioner was not aware there is a tiny and important difference between replacing and appending.

[E.Serra]

that's the exact definition of append IMHO

[Syfer]

I never said this is the best way it's another way if someone wants to try. Sometimes you have a platform element you can't change.