How to Change the Text of a Span Element Using JavaScript

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

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";

How to change Span text with Javascript?

Wrap the selector inside '

document.getElementsByClassName('elementor-element elementor-element-2d85236 elementor-widget elementor-widget-text-editor')[0].innerText = 'connected'

Change content of span class with JavaScript

Tried the code on a different site on the same host and still didn't work. I modified the code based on an elementID code I found on a similar site within their host and this worked:

var newText = document.getElementsByClassName('new')[0];
newText.innerHTML = 'new text here';

No idea why, but this worked. Thanks for the responses!

Change span text?

document.getElementById("serverTime").innerHTML = ...;

Change span to unknown on click in javascript

I tried to answer your question but it was hard without having the html.

you can get the input value like you did and then iterate through the spans elements (or get just the one you need by id for example) and change the text content.

function swap_text() {
    let input_text = document.getElementById("input_text").value;
    let all_spans = document.getElementsByTagName("span");
    for (let span of all_spans) {
         span.textContent = input_text;
    }
     console.log(input_text);
}

<span>my span</span>
<input type="text" id="input_text">
<button onclick="swap_text()">swap</button>

I need some help using JavaScript to wrap span tags around existing content

Explanations are in the code, for every line.

document.addEventListener('DOMContentLoaded', () => { // make sure DOM is parsed ...
  let items = document.querySelectorAll('.list-view__count p'); // ... to find elements
  for (const item of items) { // iterate over the node list
    let span = document.createElement('span'); // create the span
    span.toggleAttribute('data-nosnippet', true); // add the data-nosnippet attribute, with no value
    span.append(item.childNodes[0]); // move the text node into the span
    item.append(span); // and the span into the paragraph
  }
})

/* some css so we see the change works */
span[data-nosnippet] { color: green; }

<div class="list-view__count">
  <p>
    Showing 1 - 18 of 46 results
  </p>
</div>
<div class="list-view__count">
  <p>
    Showing 1 - 18 of 49 results
  </p>
</div>
<div class="list-view__count">
  <p>
    Showing 1 - 18 of 41 results
  </p>
</div>

How do I change the text of a Span element as the user navigates through this Jquery slider?

You could use the after or before function of flexslider and target some data you want to put into the span. I use the after function in my example to change the title span to the data-text attribute of the the current image.

Hope that helps.

$('.flexslider').flexslider({  animation: "slide",  after: function(){    //console.log("do Something");    var target = $(".flex-active-slide img").attr("data-text");    $("#titleHere").html(target);    }});

.flexslider {    width: 200px;    height: 200px;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script><!-- Place somewhere in the <body> of your page --><span id="titleHere">TITLE HERE</span><div class="flexslider">  <ul class="slides">    <li>      <img src="https://dummyimage.com/200" data-text="NEW TITLE 1"/>    </li>    <li>      <img src="https://dummyimage.com/210" data-text="NEW TITLE 2"/>    </li>    <li>      <img src="https://dummyimage.com/220" data-text="NEW TITLE 3"/>    </li>    <li>      <img src="https://dummyimage.com/230" data-text="NEW TITLE 4"/>    </li>  </ul></div>

Unable to change the text of a span element using Javascript

As getElementById treats the parameter value as id, you do not need to prefix the id string with the symbol #:

document.getElementById('candyCounter').textContent

Please Note: You have to prefix the symbol (#) when using querySelector() API:

document.querySelector('#candyCounter').textContent