CODEWITHSUNDEEP
javascriptjqueryinsert
tddrchrdsn
tddrchrdsn

Reputation: 3

Insert a character (".") before a span tag inside an h1 tag

I'm working on a Help project that contains thousands of .htm topics. Each topic has a heading (inside a h1 tag). Each heading contains a span tag. I'm looking for a script that would allow me to insert a period (".") separator before the span tag in every h1 tag across all topics.

For example, I need to change...

<h1>Heading<span>Heading</span></h1>

to...

<h1>Heading.<span>Heading</span></h1>

I've tried the following, but it doesn't seem to work. (Note that I'm a relative newb when it comes to jquery/scripting.)

$(function(){
    $("h1.span").before(".");
});

Thanks in advance.

Upvotes: 0

Views: 1011

Answers (4)

Tanmay Chakrabarty
Tanmay Chakrabarty

Reputation: 64

Simply use the following,

$('h1 > span').before('.');

This inserts a . before the span tag

Upvotes: 0

epascarello
epascarello

Reputation: 207527

Just use CSS to add it using after and contents

h1 span::after{
  content: "."
}
<h1><span>Hello</span></h1>
<h1><span>World</span></h1>
<h1><span>Foo</span></h1>
<h1><span>Bar</span></h1>

Upvotes: 1

Lukasz
Lukasz

Reputation: 1842

You could try this.

$("h1 span").prepend(".")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>My brain</span> <span>Yo</span></h1>
<h1>Some test <span>Yo</span></h1>
<h1>Another test<span>Yo</span></h1>

Upvotes: 0

Hugo E Sachez
Hugo E Sachez

Reputation: 134

When you try to query an element you've to find it with Jquery functions, I face you're confused with the "CSS" syntax, so you can use the "find()" Jquery function:

$("h1").find("span").before(".")

I hope it helps, regards.

Upvotes: 0

Related Questions