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>

Answer 1

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>');

Answer 2

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.

Answer 3

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.