How can I add the <h1> tag inside a range using jQuery?

Question

jsFiddle

I am trying to add some text to a title that is in between. But I do not know how to add to the actual header, not just the range.

Style:

h1 {font-size:250%;color:red;} 

HTML:

 <span class="note"> <h1> some text </h1> </span> 

I run this:

 $('.note:first-child').append("more text"); 

But the text is added after the title tag and therefore does not have the style of the title applied to it. How can I add a title?

Answer 1

http://jsfiddle.net/bTubp/2/

 $('.note h1:first-child').append("more text"); 

to insert inside the first h1 each .note class

and

 $('.note:first-child h1').append("more text"); 

to insert inside text for h1 first .note class

For the first h1 first .note

 $('.note:first-child h1:first-child').append("more text"); 

Answer 2

You need a place for your selector to do what you mean:

 $('.note :first-child').append("more text"); 

or

 $('.note > :first-child').append("more text"); 

See DEMO:

• http://jsfiddle.net/bTubp/3/
• http://jsfiddle.net/bTubp/4/

When you say: .note:first-child it means something with a class note, which is also the first child of its parent. When you say: .note :first-child it means something that is the first child of its parent and inside (perhaps deeply) something with a class entry. When you say: .note>:first-child it means: something that is the first child of his parent and his parent class has a class note, and that is probably what you had in mind.

I see that there are already many answers before I finish writing, but I will publish it anyway, because I hope it will explain why your selector is not working.

Answer 3

 $('.note:first-child h1').append("more text"); 

Answer 4

$(".note h1:first").append("more text");

This will look for the ".note" class, followed by the first h1 tag.