user2731263 user2731263 - 7 months ago 30
HTML Question

How to change value from span tag?

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

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:

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>

Comments