logo标签列表

更改span元素的innerHTML

javascripthtml
3

我希望能够更改一个Span元素的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>
什么是 steps[e]？ - Sagar V
你尝试过 document.getElementByClass("mdl-step__label-indicator-content").innerHTML = VALUE 吗？ - Tomos Williams
@RusselHarrower，您能否检查一下您发布的JavaScript代码。存在引号错误。 - Reporter
可能是重复的问题，参考如何使用JavaScript更改span元素的文本。 - cнŝdk
请检查您的HTML嵌套，因为似乎有一个多余的<span>标签。请查看包含</span></span>的行。 - user2417483
你想要更改所有与查询选择器匹配的元素还是只更改其中一个带有“1”的元素？ - Pete
3个回答
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 调用速度会比这慢得多。
我唯一不理解的是wihle(span.firstChild)。其余部分都能正常工作。 span.removeChild(span.firstChild); - RussellHarrower
@RussellHarrower 这是清空DOM节点的最快方法。即使将其设置为空字符串，设置“innerHTML”也相当慢。大多数情况下，性能差异并不重要，但如果您想保持帧速率高且DOM更改平滑，则这是一个有用的技巧。 - Keith
但是span变量在哪里？它如何知道要选择哪个span？ - RussellHarrower
@RussellHarrower 哦，我更新了答案以澄清，span只是你想要清空的DOM元素变量的名称。 - Keith
0

不要使用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) ;

注意：这不会替换全部内容，它只会更新标签。
0
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>');
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接