Inserting styled html within a paragraph with jQuery?

JavaScript
1

I am creating my first project. For my tribute page I’m explaining some basic poker strategies based on one of my favorite players. I am frequently using the entities for creating the poker suit symbols (i.e. :heart: ). For the hearts and diamonds though, I am styling them with the color red. At first, i was styling them inline but from what I’ve read this is considered sloppy. Then I decided to make a class (.text-red) and created a span to cover the entity like this:

| = < and > (sorry I’m not sure how to post code without it being read by the browser)

<span class="text-red">&hearts;</span>

While this does work, I feel like it still looks sloppy and makes the code look clustered as they’re sprinkled through out my ‘p’ elements. Is there a way that I can make that span with the entity be summoned within the paragraph element and be styled in a more compact and cleaner method? I was trying to do this with jQuery by using the document ready function with .html but it doesn’t seem to work. For example:

(document).ready(function() {
         $("diamond").html("<span class="text-red">&hearts;</span>")
});

From my understanding, which could be wrong, all I would have to do then is insert an element (this is what I’m lacking?) with the class .diamond where ever I wanted to have a red colored diamond appear within my ‘p’ element. I tried using a ‘span’ with class=“diamond” with the expectation that when executed, any text within the ‘span’ element would be removed and replaced by the string shown above proceeding the .html.

Am I overthinking this? Is my second method (text-red) of styling the proper or correct way to code this? Any suggestions or tips would be great!

I’m not sure how to link my codepen project to this page. If anyone could help me with that as well I will gladly share my project for further review. In the mean time I’m going to continue to try and find a solution on my own. Thank you for reading!

2

You can post the URL to your codepen.

Using a classed <span> is the only way I can think of with just HTML and CSS. You can see this on pages that have icons in them (for example, when you use Font Awesome for icons in your page, etc., you’ll see something like <i class="fa fa-github fa-fw"></i> many times).

In short, HTML is verbose.

I’m not sure about using jQuery, because then you’ll have to target these elements (like $('.diamond')), which means you’ll have to add <span class="diamond"> in your HTML in the first place.

3

As you can see I have put all the styling in byway of a span with the .text-red class. At the bottom you can see where I’m trying to test my attempt. I have the .text bling holding the diamond entity to replace any elements text that has the class .diamond. Then in the html code itself I just have both classes in the span as “text-red diamond”, but when I run it the text inside the span doesn’t change. I feel like the answer is staring me in the face and I’m over thinking it. Should I just stick to the simple styling with a span element and having the entity within it? Thank you for your reply.

4

You should move your JS code inside the JS editor (same with the css). It looks like this code is loaded before jQuery, so you don’t see any changes.

I’d say just stick with just HTML and CSS. Using <span class="text-red diamond"></span> and then inserting &diams; in it via jQuery isn’t significantly better than plain <span class="text-red">&diams;</span>.