Change innerHTML of span

Question

I am wanting to change the innerHTML of a span however I am having some issues.

Part of code I need to edit

<li class="mdl-step mdl-step--editable is-active">
                <span class="mdl-step__label">
                <span class="mdl-step__title">
                    <span class="mdl-step__title-text">Your Information</span>
                    <span class="mdl-step__title-message">Edit this step later</span>
                </span>
                    <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span>
                </span>
                </span>
                <div class="mdl-step__content">
                </div>
                <div class="mdl-step__actions">
                  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                        Continue
                      </button>
                  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                        Cancel
                      </button>
                </div>
              </li>

I need to change

<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span>
                    </span>
                    </span>

to

 <span class="mdl-step__label-indicator">
<i class="material-icons mdl-step__label-indicator-content">check</i>
                        </span>

Javascript code ( but I made it even easier for you)

elements = steps[e].querySelectorAll("span.mdl-step__label > span.mdl-step__label-indicator");
                        alert(elements[0].innerHTML+" this better work");

                        elements[0].appendChild( document.createTextNode('<i class="material-icons mdl-step__label-indicator-content">check</i>') );

also tried

 var span = document.getElementByClass('li.is-active >  span.mdl-step__label-indicator");
       text = document.createTextNode("44546465");
        span.innerHTML = ''; // clear existing
        span.appendChild(text);

None of them worked.

Full HTML code

 <section class="mdl-stepper">

    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--12-col">
       <!-- markup -->
        <ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="ipet-stepper">
          <li class="mdl-step mdl-step--editable is-active">
            <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Your Information</span>
                <span class="mdl-step__title-message">Edit this step later</span>
            </span>
                <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span>
            </span>
            </span>
            <div class="mdl-step__content">
            </div>
            <div class="mdl-step__actions">
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                    Continue
                  </button>
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                    Cancel
                  </button>
            </div>
          </li>
          <li class="mdl-step">
            <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Your Pets</span>
            </span>
                <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span>
            </span>
            </span>
            <div class="mdl-step__content"></div>
            <div class="mdl-step__actions">
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                    Continue
                  </button>
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                    Cancel
                  </button>
            </div>
          </li>
          <li class="mdl-step">
            <span class="mdl-step__label">
            <span class="mdl-step__title">
                <span class="mdl-step__title-text">Emergency Contacts</span>
                <span class="mdl-step__title-message">Who should we contact if your pet goes missing?</span>
            </span>
                <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span>
            </span>
            </span>
            <div class="mdl-step__content"></div>
            <div class="mdl-step__actions">
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
                    Continue
                  </button>
              <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
                    Cancel
                  </button>
            </div>
          </li>
        </ul>

have you tried `document.getElementByClass("mdl-step__label-indicator-content").innerHTML = VALUE` — Tomos Williams, Jul 14 '17 at 09:26
@RusselHarrower can you check your posted javascript code. There is a quotation error. — Reporter, Jul 14 '17 at 09:27
Possible duplicate of [How do I change the text of a span element in JavaScript](https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-in-javascript) — cнŝdk, Jul 14 '17 at 09:29
Check your HTML nesting as it appears that you have one span too many. Looat the lines with — , Jul 14 '17 at 09:29
Are you wanting to change all those elements that match the query selector or just the one with 1 in? — Pete, Jul 14 '17 at 09:30

Keith · Accepted Answer · 2017-07-15T09:10:29.790

There is a lot of code to digest here. I'm not sure where to start, but some issues leap out:

document.createTextNode(
    '<i class="material-icons mdl-step__label-indicator-content">check</i>')

You cannot create a text node that contains HTML, instead do:

var i = document.createElement('i');
i.style.className = 'material-icons mdl-step__label-indicator-content';
var text = document.createTextNode('check');
i.appendChild(text);

elements[0].appendChild(i);

Alternatively (and slower) use innerHTML directly:

elements[0].innerHTML = 
    '<i class="material-icons mdl-step__label-indicator-content">check</i>';

However, that does clear the existing content (slowly). If you want to clear it quickly use:

var span = elements[0];
while (span.firstChild)
    span.removeChild(span.firstChild);

If you only want the first element try:

// Replace
elements = steps[e].querySelectorAll(
    'span.mdl-step__label > span.mdl-step__label-indicator');

// With
element = steps[e].querySelector(
    'span.mdl-step__label > span.mdl-step__label-indicator');

Next up, your nesting could be off and it really doesn't add much to the query's performance, so try:

element = steps[e].querySelector(
    '.mdl-step__label .mdl-step__label-indicator');

// Or even
element = steps[e].querySelector('.mdl-step__label-indicator');

Unless you're doing this multiple times in a single frame the innerHTML call is going to be much slower than this.

the only part i am not getting is wihle (span.firstChild) span.removeChild(span.firstChild); rest works well — RussellHarrower, Jul 15 '17 at 08:32
@RussellHarrower That's the quickest way to empty a node in the DOM. Setting `innerHTML` is fairly slow, even if you're setting it to an empty string. Mostly the performance difference doesn't really matter, but if you're trying to keep frame rates high and DOM changes smooth it's a useful trick. — Keith, Jul 15 '17 at 09:00
but where is the span variable like how does it know which span — RussellHarrower, Jul 15 '17 at 09:08
@RussellHarrower ah, I've updated the answer to clarify, `span` is just the name of the DOM element variable that you want to empty. — Keith, Jul 15 '17 at 09:11

Muthu Kumaran · Answer 2 · 2017-07-14T09:35:11.423

Instead of appendChild, use innerHTML to replace all content in that span,

elements[0].innerHTML = '<i class="material-icons mdl-step__label-indicator-content">check</i>' ;

If you still want to use appendChild then you can't simply the markup that like that. You need to create element using document.createElement and then use need to use appendChild to insert new created element.

Using AppendChild

Not sure what steps[e] is, so I'm using document instead

elements = document.querySelectorAll("span.mdl-step__label > span.mdl-step__label-indicator");
alert(elements[0].innerHTML+" this better work");

var iTag = document.createElement('i');
iTag.setAttribute('class', 'material-icons mdl-step__label-indicator-content');
iTag.innerHTML = 'check';

elements[0].appendChild(iTag) ;

Note: This will not replace everything. It will just update the span tag.

score 0 · Answer 3 · answered Jul 15 '17 at 09:21

While your span contain only one child span and you want to remove it so use empty function then use append to add the <i> tag

$(".mdl-step__label-indicator").empty();
$(".mdl-step__label-indicator").append('<i class="material-icons mdl-step__label-indicator-content">check</i>');

Change innerHTML of span

3 Answers3