53

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.

sunjie
  • 555
  • 1
  • 4
  • 5
  • 2
    OP, please consider changing the answer from Hendy Irawan to be the accepted answer. – Gui Imamura Jul 23 '15 at 19:06
  • 2
    This post seems to contain two different questions: 1) How to append text to a `
    ` and 2) How to hide the `
    ` until the text has been added.
     – Zero3 Sep 14 '15 at 10:46

5 Answers5

178

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

Community
  • 1
  • 1
Hendy Irawan
  • 20,498
  • 11
  • 103
  • 114
  • 11
    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. – rbhitchcock Jul 04 '14 at 05:59
1

Why not use

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

Escape when needed.

WesternGun
  • 11,303
  • 6
  • 88
  • 157
  • 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. – Reporter Feb 07 '18 at 13:08
-1

I know this question has been answered with different variations but here is one more. I had a similar requirement so spent a little time trying to find a way to do it.

If you know the structure of a HTML, you can get the contents as HTML using jQuery, next change the contents of the same HTML by adding to it.

var lastPageText = $('#test p').html();
        $('#test p').html( lastPageText + ' &#128578;' )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="test"><p>This is how things go perfecting well<span> even in a span</span></p></div>

Hope the above helps someone looking for similar answer

Cheers

Syfer
  • 4,262
  • 3
  • 20
  • 37
-5

You can do this using multiple ways. You can create a css class and do this:
Method 1
CSS:

.hello{ background-color: green }

HTML

<div id="msg"></div>

Javascript:

$("#msg").append("hello world").addClass("hello");


Method 2
HTML

<div id="msg" class="hello" style="display:none;"></div>

CSS:

.hello{ background-color: green }

Javascript:

$("#msg").append("hello world").show();


Method 3 HTML:

<div id="msg"></div>


Javascript:

$("#msg").append("hello world").css("background-color","green");
Michael Schinis
  • 697
  • 1
  • 7
  • 21
  • @AliKhanusiya Because .append() appends HTML and not text. – DevAntoine Feb 18 '16 at 16:02
  • @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." – DevAntoine Feb 19 '16 at 16:09
-17
$('#msg').append('Some text').show();
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • 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? – sunjie Jul 05 '11 at 20:55
  • @sunjie -- `show()` just removes the `display: none` and turns it to `display: block` – Naftali Jul 05 '11 at 21:13
  • 58
    This does not append text, it appends HTML. Big difference. – usr Oct 02 '12 at 13:26
  • 11
    Agree with @usr. If the "text" is coming from user input, this will cause JavaScript injection. – Hendy Irawan Apr 20 '13 at 10:21
  • 2
    Would `$('#msg').text( $('#msg').text() + 'Some text' )` be safer? According to the [jQuery API](http://api.jquery.com/text/#text2), `.text( [text] )` escapes the text with `.createTextNode()`. – Gui Imamura Jul 23 '15 at 19:12
  • 1
    Don't know why people are ranking negative to your answer. You have answered correctly. – AsgarAli Jan 19 '16 at 08:43