How do I get the content of a <span> using jQuery?

user_83122 0
Viewed 482421

How do I get the content 'This is my name' of the span?

<div id='item1'>
<span>This is my name</span>
</div>
html jquery javascript
12 Answers

I think this should be a simple example:

$('#item1 span').text();

or 

$('#item1 span').html();
user_601470 
$("#item1 span").text();
user_477380

Assuming you intended it to read id="item1", you need

$('#item1 span').text()
user_54650

Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:

<div class='item1'>
  <span>This is my name</span>
</div>

alert($(".item span").text());

Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:

<html>
 <head>
  <title>jQuery test</title>
  <!-- script that inserts jquery goes here -->
  <script type='text/javascript'>
    $(document).ready(function() { alert($(".item span").text()); });
  </script>
</head>
<body>
 <div class='item1'>
   <span>This is my name</span>
 </div>
</body>

user_1871260

In javascript wouldn't you use document.getElementById('item1').innertext?

user_2325190

You could use id in span directly in your html.

<span id="span_id">Client</span>

Then your jQuery code would be

$("#span_id").text();

Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span. So 

$("#span_id").val();

will return null.

user_114510170

VERY IMPORTANT Additional info on difference between .text() and .html():

If your selector selects more than one item, e.g you have two spans like so <span class="foo">bar1</span> <span class="foo">bar2</span> ,

then

$('.foo').text(); appends the two texts and give you that; whereas

$('.foo').html(); gives you only one of those.

user_37880510
Related