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

而不是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 2

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

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

改变span的innerHTML

3 个答案: