CODEWITHSUNDEEP
javascriptcss
422
422

Reputation: 5770

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 % 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.

Upvotes: 0

Views: 96

Answers (3)

Dennis
Dennis

Reputation: 32598

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

#bob {

and

#bob h3 {

Upvotes: 0

Karl Nicoll
Karl Nicoll

Reputation: 16419

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.

Upvotes: 2

Marc B
Marc B

Reputation: 360572

$('#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().

Upvotes: 2

Related Questions