How to add a span tag to a variable inside a .html Jquery method?

Question

I'm having a difficult time finding out why this code doesn't work. Specifically, why I can't span the variable, and then add to it a class? Of course, I succeed in adding the class if it's just text, and not a variable.:

var fruit = 'bananas';
var paragraph = $('<div></div>');

paragraph.html('I like ' + '<span class="features">'fruit'</span>');
$(".features").css("color","yellow");

How does it not work? What is happening? What should be happening? Are there any errors? — VLAZ
– VLAZ, Commented Oct 21, 2018 at 15:46
Looks like a syntax error, needs a + on either side of fruit — Robin Zigmond
– Robin Zigmond, Commented Oct 21, 2018 at 15:49
@RobinZigmond You got it. I can't believe that was all I was missing. Hours and hours and hours spent on THAT. Thanks again. — fourOhFour
– fourOhFour, Commented Oct 21, 2018 at 15:55

joshmoto · Accepted Answer · 2018-10-21 16:01:39Z

3

A few things I can see that is wrong with your code.

// fruit var is fine
var fruit = 'bananas';

// originally you had html markup in here, but you have to use html selectors.
var paragraph = $('div');

// you were close here but you didnt have plus symbols either side of your fruit var
paragraph.html('I like '+'<span class="features">'+fruit+'</span>');

// add the colour to your .features span - this is fine
$(".features").css("color","yellow");

See working fiddle here. https://jsfiddle.net/joshmoto/k0vrs8ne/

edited Oct 21, 2018 at 16:01

answered Oct 21, 2018 at 15:56

joshmoto

5,2061 gold badge34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fourOhFour Over a year ago

That was exactly it! Thank you! Those blasted plus symbols... I appreciate the link to the jsfiddle!.

Collectives™ on Stack Overflow

How to add a span tag to a variable inside a .html Jquery method?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related