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

$('#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/


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');

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.