How do I add text to specific div element using jQuery?

Question

I am having a problem with jquery. My HTML is

<div id="first">
   <span class="test"></span>
</div>
<div id="second">
   <span class="test"></span>
<div>

Now I am trying to add text in span using Jquery.

$j('span.test').text('Welcome');

After that it becomes,

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test">Welcome</span>
<div>

But, I am tryting to achieve is,

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test"></span>
<div>

How can I do that in jquery?

@RobertKoritnik As he says his code works, I assume he has created a new jQuery alias using var $j = jQuery.noConflict(); — Rory McCrossan
– Rory McCrossan, Commented Jan 11, 2013 at 12:57

Robert Koritnik · Accepted Answer · 2013-01-11 13:45:08Z

15

Several possible alternatives

Others have provided their answers already but let me give you some more alternatives.

$("span.test:first").text("Welcome");
$("#first span.test").text("Welcome");
$("span.test").first().text("Welcome");
$("span.test").eq(0).text("Welcome");
$("span.test", "#first").text("Welcome");

The second and last one likely being the fastest because they target particular container by ID.
^{(internal jQuery optimisations may prove me wrong with any future version)}

Performance comparison

Here's a JSPerf test that performance compares upper possibilities. As anticipated, the second and last approaches are the fastest of all because element selection is much simplified. I've tried running them on Chrome and you may run them in other browsers if you want to and see differences.

edited Jan 11, 2013 at 13:45

answered Jan 11, 2013 at 13:04

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milimetric · Accepted Answer · 2013-01-11 13:07:02Z

5

$('#first span.test').text('Welcome');

jQuery selectors are CSS selectors extended with a bit of magic. You can find everything you need to know here: http://api.jquery.com/category/selectors/

edited Jan 11, 2013 at 13:07

answered Jan 11, 2013 at 12:57

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2013-01-11 13:10:44Z

1

You need to use the :first selector to say that you only want to add text to the first element the selector finds. Try this:

$j('span.test:first').text('Welcome');

Example fiddle

Alternatively, you can use the id of the parent div to make the selector unique:

$j('#first .test').text('Welcome');

edited Jan 11, 2013 at 13:10

answered Jan 11, 2013 at 12:55

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

12 Comments

Robert Koritnik Over a year ago

I didn't donwnvote but :first selector filter matches all elements that are first childs of their parents, which means that all of the test divs would still match... So your first solution is of course invalid. It would be ok if you'd do $("span.test").first()...

Rory McCrossan Over a year ago

@RobertKoritnik you're cofusing :first, with :first-child. :first selects the first element of the matching set.

Robert Koritnik Over a year ago

@RoryMcCrossan: You're right... My bad... But as mentioned I didn't donwvote so I can't remove it.

Rory McCrossan Over a year ago

@RobertKoritnik Don't worry, not a problem :)

Milimetric Over a year ago

Hm, I wouldn't be such a stickler if it didn't seem like the OP was very new at jQuery. I'm imagining all kinds of scary code being written :)

|

David H · Accepted Answer · 2013-01-11 13:09:31Z

0

In this example you can do what RoRyMcCrossan For general selection i recommend you to look at this :http://api.jquery.com/child-selector/

Or you can use this

http://api.jquery.com/eq-selector/

answered Jan 11, 2013 at 13:09

David H

511 silver badge7 bronze badges

Comments

rongsir · Accepted Answer · 2013-01-11 13:14:35Z

0

Since you have an id, which usually is unique on one page, it woud be best to use the following:

$("#first span.test").text("Welcome");

answered Jan 11, 2013 at 13:14

rongsir

193 bronze badges

Collectives™ on Stack Overflow

How do I add text to specific div element using jQuery?

5 Answers 5

Several possible alternatives

Performance comparison

Comments

Comments

12 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Several possible alternatives

Performance comparison

Comments

Comments

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related