How Do I Add Text To Specific Div Element Using Jquery?

Question

I am having a problem with jquery. My HTML is

<

Solution 1:

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.

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.

Solution 2:

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

Solution 3:

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

Solution 4:

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/

Solution 5:

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

Html5 Playground