title: Change innerHTML of span
body: <p>I am wanting to change the innerHTML of a span however I am having some issues.</p>
  
  <p>Part of code I need to edit</p>
  
  <pre><code>&lt;li class="mdl-step mdl-step--editable is-active"&gt;
                  &lt;span class="mdl-step__label"&gt;
                  &lt;span class="mdl-step__title"&gt;
                      &lt;span class="mdl-step__title-text"&gt;Your Information&lt;/span&gt;
                      &lt;span class="mdl-step__title-message"&gt;Edit this step later&lt;/span&gt;
                  &lt;/span&gt;
                      &lt;span class="mdl-step__label-indicator"&gt;&lt;span class="mdl-step__label-indicator-content"&gt;1&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;/span&gt;
                  &lt;div class="mdl-step__content"&gt;
                  &lt;/div&gt;
                  &lt;div class="mdl-step__actions"&gt;
                    &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next&gt;
                          Continue
                        &lt;/button&gt;
                    &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel&gt;
                          Cancel
                        &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
  </code></pre>
  
  <p>I need to change </p>
  
  <pre><code>&lt;span class="mdl-step__label-indicator"&gt;&lt;span class="mdl-step__label-indicator-content"&gt;1&lt;/span&gt;
                      &lt;/span&gt;
                      &lt;/span&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code> &lt;span class="mdl-step__label-indicator"&gt;
  &lt;i class="material-icons mdl-step__label-indicator-content"&gt;check&lt;/i&gt;
                          &lt;/span&gt;
  </code></pre>
  
  <p>Javascript code ( but I made it even easier for you)</p>
  
  <pre><code>elements = steps[e].querySelectorAll("span.mdl-step__label &gt; span.mdl-step__label-indicator");
                          alert(elements[0].innerHTML+" this better work");
  
                          elements[0].appendChild( document.createTextNode('&lt;i class="material-icons mdl-step__label-indicator-content"&gt;check&lt;/i&gt;') );
  </code></pre>
  
  <p>also tried</p>
  
  <pre><code> var span = document.getElementByClass('li.is-active &gt;  span.mdl-step__label-indicator");
         text = document.createTextNode("44546465");
          span.innerHTML = ''; // clear existing
          span.appendChild(text);                     
  </code></pre>
  
  <p>None of them worked.</p>
  
  <p>Full HTML code</p>
  
  <pre><code> &lt;section class="mdl-stepper"&gt;
  
      &lt;div class="mdl-grid"&gt;
        &lt;div class="mdl-cell mdl-cell--12-col"&gt;
         &lt;!-- markup --&gt;
          &lt;ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="ipet-stepper"&gt;
            &lt;li class="mdl-step mdl-step--editable is-active"&gt;
              &lt;span class="mdl-step__label"&gt;
              &lt;span class="mdl-step__title"&gt;
                  &lt;span class="mdl-step__title-text"&gt;Your Information&lt;/span&gt;
                  &lt;span class="mdl-step__title-message"&gt;Edit this step later&lt;/span&gt;
              &lt;/span&gt;
                  &lt;span class="mdl-step__label-indicator"&gt;&lt;span class="mdl-step__label-indicator-content"&gt;1&lt;/span&gt;
              &lt;/span&gt;
              &lt;/span&gt;
              &lt;div class="mdl-step__content"&gt;
              &lt;/div&gt;
              &lt;div class="mdl-step__actions"&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next&gt;
                      Continue
                    &lt;/button&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel&gt;
                      Cancel
                    &lt;/button&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mdl-step"&gt;
              &lt;span class="mdl-step__label"&gt;
              &lt;span class="mdl-step__title"&gt;
                  &lt;span class="mdl-step__title-text"&gt;Your Pets&lt;/span&gt;
              &lt;/span&gt;
                  &lt;span class="mdl-step__label-indicator"&gt;&lt;span class="mdl-step__label-indicator-content"&gt;2&lt;/span&gt;
              &lt;/span&gt;
              &lt;/span&gt;
              &lt;div class="mdl-step__content"&gt;&lt;/div&gt;
              &lt;div class="mdl-step__actions"&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next&gt;
                      Continue
                    &lt;/button&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel&gt;
                      Cancel
                    &lt;/button&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mdl-step"&gt;
              &lt;span class="mdl-step__label"&gt;
              &lt;span class="mdl-step__title"&gt;
                  &lt;span class="mdl-step__title-text"&gt;Emergency Contacts&lt;/span&gt;
                  &lt;span class="mdl-step__title-message"&gt;Who should we contact if your pet goes missing?&lt;/span&gt;
              &lt;/span&gt;
                  &lt;span class="mdl-step__label-indicator"&gt;&lt;span class="mdl-step__label-indicator-content"&gt;3&lt;/span&gt;
              &lt;/span&gt;
              &lt;/span&gt;
              &lt;div class="mdl-step__content"&gt;&lt;/div&gt;
              &lt;div class="mdl-step__actions"&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next&gt;
                      Continue
                    &lt;/button&gt;
                &lt;button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel&gt;
                      Cancel
                    &lt;/button&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>