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

Question

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

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

我想把它切换到这个

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

如果我使用innerHTMLorinnerText或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 节点和重新渲染可能很重）。