span变化innerHTML

Question

我想改变一个跨度的innerHTML，但是我有一些问题。

我需要编辑的部分代码

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

我要换衣服

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

至

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

Javascript代码(但我让您更容易)

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

也试过

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

他们都不起作用。

完整HTML代码

 <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

这里有很多代码需要消化。我不知道从哪里开始，但有些问题突然出现了：

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

不能创建包含HTML的文本节点，请执行以下操作：

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

或者(和慢一点)直接使用innerHTML：

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

然而，这确实清除了现有的内容(缓慢)。如果您想快速清除它，请使用：

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

如果只想要第一个元素，请尝试：

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

接下来，您的嵌套可能已经关闭，而且它实际上并没有增加查询的性能，所以请尝试：

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

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

除非您在单个帧中多次执行此操作，否则innerHTML调用将比此慢得多。

Answer 2

而不是使用appendChild，而是使用innerHTML替换该范围内的所有内容，

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

如果您仍然想使用appendChild，那么就不能简单地使用这样的标记。您需要使用document.createElement创建元素，然后使用需要使用appendChild插入新创建的元素。

使用 AppendChild

不知道steps[e]是什么，所以我用document代替

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

注:这并不能取代一切。它将只更新span标记。

Answer 3

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