How to change value from span tag?

Question

Here is html code

<div style="float: left; padding-top: 8px; width: 340px; overflow: hidden;" id="about_me_text_contents">    
    <b><span class="notranslate">Name</span></b>        
    <br>
    <span style="font-size:80%">Since: <span data-sl-tgtfmt="shortDate" data-sl-dtfmt="%m/%d/%y" class="SL_date">05/17/13</span></span><br>       
    <br>
    Male
    <br>    
    Age: <span class="notranslate">23</span>
    <br>        
    United States - NY
    <br>
    Last log on: <span class="notranslate"></span>
    <br>    
    <br style="line-height:12px;">
    <i id="user_tagline"><span class="notranslate">Type your tagline here</span></i>
    <br>
    <div id="aboutme_conditional_information_div">
    <div id="aboutme_gallery_div" style="line-height:12px; padding-bottom: 8px;">
        <span style="font-size:80%"><a class="see-my-albums" href="http://www.test.com">See My Albums (1)</a>
        </span>
    </div>
    </div>  
 </div>

What I'm doing here like code below but this not change the Age value number but change only something else value. Maybe I can try using <br> count. Hurm...Idk.

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.notranslate span').html("your new string");

});//]]>  

</script>

I would like to use Jquery to change the span value of "Age: 23 to my number manually". I am somewhat new to Javascript and Jquery, so how would I change that span value without it having an id to reference.

Many thanks in advance!

Answer 1

The class is in the span element you need to combine those 2 selectors also since there are multiple elements with the same class you need to get the second span

$('span.notranslate').eq(1).html("your new string");

Demo: Fiddle

---

Another solution is to add a special class to the age span and use that in the selector instead of the common notranslate class like

<span class="notranslate age">23</span>

then

$('span.age').html("your new string");

Demo: Fiddle

Answer 2

Span has class name notranslate hence you need to use the selector span.notranslate . also second span element holds the value of age. you would also need to use .eq(1) to target the second span. Something like this:

$('span.notranslate:eq(1)').html("new age here");

Answer 3

Use CSS query selectors to grab the HTML element that you want to chain. You can daisy-chain selectors together to make them more specific.

For example, #about_me_text_contents would select the element with the id of "about_me_text_contents", while #about_me_text_contents span would select one or more span elements inside the element that id. To take it a step further, you could grab only the second span by using this selector: #about_me_text_contents span:nth-of-type(2)

As an alternative, you can be less specific in your CSS selector, grabbing an entire array of elements, then reference the one you want to use.

Decent CSS selectors references:

• Selectors W3C Specification
• Selectors on Mozilla.org (unofficial)
• CSS Selectors Reference on w3schools (unofficial)

CSS selectors can be used both by jQuery and by native JavaScript (using document.querySelector() and document.querySelectorAll() to select elements.

Here's a demo using your provided HTML:

 var ageSpan = document.querySelector("#about_me_text_contents span:nth-of-type(2)"); /* Note that you could also do the following: */ // ageSpan = document.querySelectorAll("#about_me_text_contents span.notranslate")[1]; ageSpan.innerHTML = "A billion years old!"; 

 <div style="float: left; padding-top: 8px; width: 340px; overflow: hidden;" id="about_me_text_contents"> <b><span class="notranslate">Name</span></b> <br> <span style="font-size:80%">Since: <span data-sl-tgtfmt="shortDate" data-sl-dtfmt="%m/%d/%y" class="SL_date">05/17/13</span></span> <br> <br>Male <br>Age: <span class="notranslate">23</span> <br>United States - NY <br>Last log on: <span class="notranslate"></span> <br> <br style="line-height:12px;"> <i id="user_tagline"><span class="notranslate">Type your tagline here</span></i> <br> <div id="aboutme_conditional_information_div"> <div id="aboutme_gallery_div" style="line-height:12px; padding-bottom: 8px;"> <span style="font-size:80%"><a class="see-my-albums" href="http://www.test.com">See My Albums (1)</a> </span> </div> </div> </div>