How do I change the text of a span element using JavaScript

Question

If I have a span  say   lt span id  quot myspan quot  gt  hereismytext  lt  span gt   How do I use JavaScript to change  quot hereismytext quot  to  quot newtext quot

User · Answer

You may also use the querySelector   method  assuming the  myspan  id is unique as the method returns the first element with the specified selector   document querySelector   myspan   textContent    newtext     developer mozilla

User · Answer

You can do  document querySelector   Span    textContent    content to display

User · Answer

In addition to the pure javascript answers above  You can use jQuery text method as following       myspan   text  newtext      If you need to extend the answer to get change html content of a span or div elements  you can do this       mydiv   html   lt strong gt new text lt  strong gt       References    text    http   api jquery com text    html    http   api jquery com html

User · Answer

Like in other answer  innerHTML and innerText are not recommended  it s better use textContent  This attribute is well supported  you can check it this      http   caniuse com  search textContent

User · Answer

Here s another way   var myspan   document getElementById  myspan     if  myspan innerText        myspan innerText    newtext     else if  myspan textContent            myspan textContent    newtext          The innerText property will be detected by Safari  Google Chrome and MSIE   For Firefox  the standard way of doing things was to use textContent but since version 45 it too has an innerText property  as someone kindly apprised me recently  This solution tests to see if a browser supports either of these properties and if so  assigns the  newtext     Live demo  here

User · Answer

For some reason  it seems that using  quot text quot  attribute is the way to go with most browsers  It worked for me    quot  span id quot   text  quot text value to assign quot

User · Answer

I use Jquery and none of the above helped  I don t know why but this worked        span id   text  new value

User · Answer

x000D   x000D   function             document  ready function            myspan   text  This is span            jQuery    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt span id  myspan  gt  hereismytext  lt  span gt  x000D   x000D   x000D   user text   to change span text

User · Answer

I used this one document querySelector  ElementClass   innerText    newtext   Appears to work with span  texts within classes buttons

User · Answer

For modern browsers you should use   document getElementById  myspan   textContent  newtext     While older browsers may not know textContent  it is not recommended to use innerHTML as it introduces an XSS vulnerability when the new text is user input  see other answers below for a more detailed discussion      POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE   document getElementById  myspan   innerHTML  newtext

User · Answer

Using innerHTML is SO NOT RECOMMENDED  Instead  you should create a textNode  This way  you are  binding  your text and you are not  at least in this case  vulnerable to an XSS attack   document getElementById  myspan   innerHTML    sometext     INSECURE     The right way   span   document getElementById  myspan    txt   document createTextNode  your cool text    span appendChild txt     For more information about this vulnerability  Cross Site Scripting  XSS  - OWASP  Edited nov 4th 2017   Modified third line of code according to  mumush suggestion   use appendChild    instead    Btw  according to  Jimbo Jonny I think everything should be treated as user input by applying Security by layers principle  That way you won t encounter any surprises

User · Answer

document getElementById  myspan   innerHTML    newtext

User · Answer

EDIT  This was written in 2014  You probably don t care about IE8 anymore and can forget about using innerText  Just use textContent and be done with it  hooray   If you are the one supplying the text and no part of the text is supplied by the user  or some other source that you don t control   then setting innerHTML might be acceptable        Fine for hardcoded text strings like this one or strings you otherwise       control       Not OK for user-supplied input or strings you don t control unless      you know what you are doing and have sanitized the string first  document getElementById  myspan   innerHTML    newtext     However  as others note  if you are not the source for any part of the text string  using innerHTML can subject you to content injection attacks like XSS if you re not careful to properly sanitize the text first   If you are using input from the user  here is one way to do it securely while also maintaining cross-browser compatibility   var span   document getElementById  myspan    span innerText   span textContent    newtext     Firefox doesn t support innerText and IE8 doesn t support textContent so you need to use both if you want to maintain cross-browser compatibility   And if you want to avoid reflows  caused by innerText  where possible   var span   document getElementById  myspan    if   textContent  in span        span textContent    newtext     else       span innerText    newtext

User · Answer

For this span    lt span id  name  gt sdfsdf lt  span gt    You can go like this  -     name   firstChild nodeValue    Hello     World

User · Answer

document getElementById  myspan   textContent  newtext     this will select dom-node with id myspan and change it text content to new text

[javascript] How do I change the text of a span element using JavaScript?

Examples related to javascript

Examples related to html