如何修改锚元素文本且不丢失Font Awesome图标？

我需要修改锚元素中的文本，但不想丢失其附带的Font Awesome图标。当前使用innerHTML修改文本的方式会导致图标消失，具体情况如下：

元素代码：

<a id="btn_lang" class="lang_btn"> <i class="fa fa-commenting-o"></i>&nbsp; Verfügbare Sprachen und Länder</a>

图标库引用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

当前修改代码：

function AT(){
    document.getElementById("btn_lang").innerHTML = "changed value";
}

点击按钮后文本修改成功，但图标丢失。请问不丢失图标的情况下修改锚元素文本的正确方法是什么？使用innerHTML时是否必须重新定义图标？

1. 直接修改目标文本节点 #

锚元素的子节点包含图标<i>和文本节点，你可以筛选出需要修改的文本节点单独更新，完全不影响图标：

function AT(){
  const btn = document.getElementById("btn_lang");
  // 遍历子节点，找到非空的文本节点
  const targetTextNode = Array.from(btn.childNodes).find(node => 
    node.nodeType === Node.TEXT_NODE && node.textContent.trim()
  );
  if (targetTextNode) {
    targetTextNode.textContent = " changed value"; // 保留前置空格保证图标与文本的间距
  }
}

2. 给文本单独添加容器（推荐） #

修改原始HTML，把需要替换的文本包裹在一个<span>里，后续直接更新这个容器的内容，逻辑更清晰：

<!-- 更新后的锚元素 -->
<a id="btn_lang" class="lang_btn"> <i class="fa fa-commenting-o"></i>&nbsp; <span id="lang_text">Verfügbare Sprachen und Länder</span></a>

function AT(){
  document.getElementById("lang_text").textContent = "changed value";
}

3. 使用innerHTML时保留图标代码 #

如果坚持用innerHTML，必须把图标代码一并写入，相当于重新渲染图标和新文本：

function AT(){
  const btn = document.getElementById("btn_lang");
  btn.innerHTML = '<i class="fa fa-commenting-o"></i>&nbsp; changed value';
}

这种方式确实需要重新定义图标代码，但无需改动原始HTML结构。

内容的提问来源于stack exchange，提问作者cheese steak jimmy's