Style output of an jQuery array

Question

I have an array containing a number of statements/quotes but I would like to add some custom HTML to help style each quote when they are displayed.

In the below code I have demonstrated what I'd like to do but at the moment the actual HTML tags are output as strings. How do I get them to render as HTML so I can style them with CSS?

Here's a working fiddle showing what I mean: https://jsfiddle.net/tawasnng/1/

// Random testimonials headlines = new Array('Food was amazing and the drinks well-priced. We’ll be back soon!<span class="boom">Test</span>', "Bad", "Ugly", "Random Headline");    var randomNumberBefore = 4;

   function randomNumberByRange (range, number) {
      var r = Math.floor(Math.random() * (range-1));
      if(r >= number)r++;
      return r;    }

   $(document).on('click','.nextquote' , function() {

      var randomNumber = randomNumberByRange( headlines.length, randomNumberBefore);
      randomNumberBefore = randomNumber;
      var nextHeadline = headlines[randomNumber];

      $(".quote").text(nextHeadline);

   });

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-17 09:23:12Z

2

You need to use .html() instead of .text() in order to make it output as HTML. Replace the following:

$(".quote").text(nextHeadline);

With:

$(".quote").html('<span class="headline">' + nextHeadline + '</span>');

And try giving something for the .headline class!

answered Aug 17, 2015 at 9:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Style output of an jQuery array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related