jQuery help: How do I use .html function to emphasize text

1

Needing a little help.
I’m on the challenge called “Change Text Inside an Element Using jQuery”.

It’s asking me to use jQuery’s .html function to emphasize text on a button. In other words, the text on the button should turn italic.

At the moment, the button looks like this:

<button class="btn btn-default target" id="target4">#target4</button>

I’ve used the following lines of code and even checked through jQuery’s own API doc, to no avail. Any ideas?

These don’t work:

$("#target4").html("<em>#target4</em>");
$("#target4").html("<em></em>");
$("#target4").html("<em>");

Sorry if this is total n00b. Thanks!

3

I just tried the first line of code and it worked. Did you put that line of code within the $(document).ready function so it looks like this:
$(document).ready(function() {
$("#target1").css(“color”, “red”);
$("#target4").html("#target4");
});

1 Like
4

I’m using the FCC window.

Not sure what’s up folks, but seems to be working now. I tried several times and could not figure it out. So what I did was hit “Reset” button and tried it again from scratch. Works now. It had to have been a typo or something.

Thanks for your really quick replies. Sorry to bug. Next time I’ll try different things before posting.

5

No offense intended at all, but it’s not quite clear that you knew what you were doing given your attempt there, along with the two others below it. Putting “#target4” inside those EM tags doesn’t mean that the $().html() function will grab the button, as the whole thing is just a string. Granted, jQuery does parse the string as HTML code, but putting an ID or class in there doesn’t mean that jQuery will select that ID or class, because it won’t. It’ll just see that text as-is and use that. The only part that jQuery uses to actually grab an element is in the preceding $(). What you can actually do is nest $().html() inside $().html(), which will grab the existing text so you can combine it with something else, sort of like this:

$("#target4").html('<em>' + $("#target4").html() + '</em>');

Also, EM always has a closing tag—you shouldn’t use it without one, like you did on that 3rd attempt.

1 Like