CODEWITHSUNDEEP
jqueryhtmlcssappend
TheRecruit
TheRecruit

Reputation: 184

Append <span>-tag to css header-element with jQuery

I've been trying to append this element after a css-class on my Wordpress site: 

<span class="blink">_</span>

I can't change the file structure, but I can use CSS/Jquery. The code snippet works when I just put it in a random , but now I want to use CSS/Jquery to append it, so that all my post-headers are rounded off with the blinking underscore (_).

The code I have so far looks like this, but it doesn't work:

$(".intro-title").after("<span class="blink">_</span>");

I've tried with and without the ""'s before and after the -tag, still no luck.

If I do a 

.intro-title::after { content: "Hello";}

it works perfectly fine. So I know that the Wordpress-setup allows me to append something after the header. I am also required to wrap my function into a tag like this:

jQuery(function($){ ... });

Hopefully, it will be possible to append my little blinking underscore to all h1's of the class "intro-title" - but for now I'm stuck!

Upvotes: 0

Views: 939

Answers (2)

Dans
Dans

Reputation: 226

$('.intro-title').after('<span class="blink">_</span>');

EDIT

Sorry @ADyson

In javascript string you can use single or double quote. If you use single quote they don't match double quote and vice versa

var myString ='hello "world"';

var myString ="hello 'world'";

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

Try to something like this.

$(".intro-title").after("<span class='blink'>_</span>");


$(".intro-title").after("<span class='blink'>_</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="intro-title">This is paragraph</p>

Or using append.

$(".intro-title").append("<span class='blink'>_</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="intro-title">This is paragraph</p>

Using Css style

.intro-title::after{
 content:'_';
}
<p class="intro-title">This is Paragraph</p>

Upvotes: 1

Related Questions