How to set a value for a span using jQuery

Question

How to set a value for a <span> tag using jQuery…

For example…

Below is my <span> tag:

<span id="submittername"></span>

In my jQuery code:

jQuery.noConflict();
    
jQuery(document).ready(function($){

    var invitee = $.ajax({
        type: "GET",
        url: "http://localhost/FormBuilder/index.php/reports/getInvitee/<?=$submitterid;?>",
        async: false
    }).responseText;

    var invitee_email=eval('(' + invitee + ')');
    var submitter_name=$.map(invitee_email.invites, function(j){ 
        return j.submitter;
    });         
    alert(submitter_name); // alerts correctly 
    $("#submittername").text(submitter_name); //but here it is not working  WHy so??????
});

You have misspelled the span's id (submitter instead of submittername). — kgiannakakis, Sep 29 '09 at 10:35

score 849 · Accepted Answer · answered Sep 29 '09 at 10:32

849

You can do:

$("#submittername").text("testing");

or

$("#submittername").html("testing <b>1 2 3</b>");

answered Sep 29 '09 at 10:32

cletus

616,129
168
910
942

3

what is the difference between .text and .html ? – ZaidRehman Jan 11 '18 at 11:56
5

@Zaid `.text()` will escape any HTML characters so that it can be displayed as text. Use `.html()` if you're inserting HTML code that you want the browser to render. More info: http://api.jquery.com/text/#text2 – Gabriel Luci Apr 18 '18 at 15:07

score 21 · Answer 2 · edited Feb 01 '12 at 10:41

21

You are using jQuery(document).ready(function($) {} means here you are using jQuery instead of $. So to resolve your issue use following code.

jQuery("#submittername").text(submitter_name);

This will resolve your problem.

edited Feb 01 '12 at 10:41

oers

18,436
13
66
75

answered Feb 01 '12 at 10:27

Santosh Ganacharya

386
3
10

score 17 · Answer 3 · answered Sep 29 '09 at 10:35

17

You're looking for the wrong selector id:

 $("#submitter").text(submitter_name);

should be

 $("#submittername").text(submitter_name);

answered Sep 29 '09 at 10:35

Steerpike

17,163
8
39
53

score 9 · Answer 4 · answered Mar 13 '15 at 06:40

9

You can use this:

$("#submittername").html(submitter_name);

answered Mar 13 '15 at 06:40

Rita Chavda

191
2
16

score 8 · Answer 5 · edited Jun 09 '22 at 07:32

8

Syntax:

$(selector).text() returns the text content.

$(selector).text(content) sets the text content.

$(selector).text(function(index, curContent)) sets text content using a function.

Source: https://www.geeksforgeeks.org/jquery-change-the-text-of-a-span-element/

edited Jun 09 '22 at 07:32

NthDeveloper

969
8
16

answered Feb 24 '21 at 16:54

E Demir

81
1
2

score 6 · Answer 6 · answered Aug 01 '18 at 01:18

6

The solution that work for me is the following:

$("#spanId").text("text to show");

answered Aug 01 '18 at 01:18

Jorge Santos Neill

1,635
13
6

For me it worked just like -> $('.className').text('some text') // span $('.className').val('some text') // input $('.className').html('some text') // div $('.className').val('some text') // input – AllanRibas Jan 19 '22 at 05:28

How to set a value for a span using jQuery

6 Answers6

Linked