Question

假设我有一个看起来像这样的节点

<a>
  <span class="glyphicons glyphicons-collapse"></span>Collapse All
</a>

我想把它切换到这个

<a>
  <span class="glyphicons glyphicons-expand"></span>Expand All
</a>

如果我使用innerHTML或innerText或textContent，则只会替换文字。我的第一个解决方案是

function toggleLastTextNode(element, textWhenTrue, textWhenFalse, value) {
  element.removeChild(obj.childNodes[1]);
  element.insertAdjacentHTML("beforeend", value ? textWhenTrue: textWhenFalse);
}

我知道文本的位置，它始终是obj.childNodes[1]所以我只需将其删除并替换它。函数调用将是这样的

toggleLastTextNode(element,"Expand","Collapse",true)

使用当前的HTML有更好的方法吗？如果可以的话，我想避免使用innerHTML。

Answer 1

怎么样

document.getElementById('elementid').firstChild.nodeValue = new_text;

innerHTML有副作用（比如断开现有的DOM节点并重新渲染可能很重）。

Answer 2

现在，当我遇到这种功能时，我总是试着看一下语义，删除一些不符合内容的东西。在这种情况下，您可以将文本保留在CSS中，因为它是UX / UI的一部分而不是内容（屏幕阅读器不应该“读取”这个例子，谷歌搜索机器人也不能，它不能做任何事情对该内容有用）。在你的情况下，不改变HTML（可能也可能缩短，我来到这样的解决方案：

HTML（几乎与您的相同，添加了href属性）：

<a href="#">
  <span class="glyphicons glyphicons-collapse"></span>
</a>

CSS：

.glyphicons-collapse::after{content: 'Collapse All'}
.glyphicons-expand::after{content: 'Expand All'}

JS（jquery）：

$('a').on('click','.glyphicons-collapse',function(e){
    e.preventDefault();
    $(this).removeClass('glyphicons-collapse');
     $(this).addClass('glyphicons-expand');
});

$('a').on('click','.glyphicons-expand',function(e){
     e.preventDefault();
    $(this).removeClass('glyphicons-expand');
     $(this).addClass('glyphicons-collapse');
});

And the fiddle with all that in it

Answer 3

使用id

定义您的html内容

<a id="glyphicons">
  <span class="glyphicons glyphicons-collapse"></span>Collapse All
</a>

然后toggleExpandCollapse()

var toggleExpandCollapse = function () {
    var oElements = document.getElementById('glyphicons').childNodes;
    if (oElements[1].className === "glyphicons glyphicons-collapse") {
        oElements.childNodes[2].nodeValue = "Expand All";
        oElements[1].className = "glyphicons glyphicons-expand"
    } else {
        oElements.childNodes[2].nodeValue = "Collapse All";
        oElements[1].className = "glyphicons glyphicons-collapse"
    }
}

如何在不使用innerHTML的情况下替换文本？

3 个答案: