Styling text within script

I have a css and js id called bob.

The jQuery is:

 $('#bob').text('hello: ' + world + '%');

The css is:

# bob {
    width:280px;
    height:50px;
    border:1px solid #aaaaaa;
    border-radius:3px 3px 3px 3px;
    background-color:#dedede;
    position:relative;
}

# bob h3 {
    color: #444444;
    font-weight:bold;
    font-size:18px !important;
    line-height:24px;
    vertical-align:middle;
    margin: 10px 0 0 20px;
}

The issue I have is, the text hello world 开发者_StackOverflow社区% should be in h3 tags. But it isn't!

Arrgghhh ... how do I wrap the text and style to pick up the css id.

Cheers.

You need to put the content into H3 tags yourself, like this:

$('#bob').html('<h3>hello: ' + world + '%</h3>');

This will manually create the <h3> tag and style it appropriately. Note that I've also used the html(...) function, instead of the text function.

$('#bob').append('<h3>Hello: ' + world + '%</h3>');

The .text() call sets the text value of a node, which by definition cannot contain HTML. If you want to REPLACE the contents of #bob with your new h3, then use .html() instead of .append().

In addition to the other answers, you need to change your css:

#bob {

and

#bob h3 {