CODEWITHSUNDEEP
jqueryjquery-selectors
ben
ben

Reputation: 29797

How can I append to a <h1> tag inside a span with jQuery?

jsFiddle

I'm trying to append some text to a heading that is in a span. But I don't know how to append to the actual heading, and not just the span.

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 gets appended after the heading tag, and therefore doesn't have the heading style applied to it. How can I append to the heading?

Upvotes: 4

Views: 11418

Answers (4)

Milan Chheda
Milan Chheda

Reputation: 11

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

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

Upvotes: 0

rsp
rsp

Reputation: 111424

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

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

or:

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

See DEMOs:

When you say: .note:first-child it means something with class note that 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 is inside (maybe deeply) of something with class note. When you say: .note>:first-child it means: something that is the first child of its parent and its parent has class note and this is probably what you meant.

I see that there are already a lot of answers before I finished writing it but I will still post it because I hope it explains why your selector didn't work.

Upvotes: 2

S L
S L

Reputation: 14328

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

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

for inserting inside the first h1 of every .note class

and

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

for inserting inside text for h1 of first .note class

For first h1 of first .note

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

Upvotes: 7

Shaz
Shaz

Reputation: 15877

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

Upvotes: 1

Related Questions