Javascript 动态更改按钮名称

我有一个按钮，它由一个名字和一个图标组成。我想动态更改按钮的名称，但不要触摸图标。我怎么做？

innerHTML

innerText

完全改变，它们不适合

<button>
   NameButton
    <svg>
    </svg>
</button>

姓名按钮

将名称包装在span或div元素中，然后尝试更改名称

HTML

<button id="buttonid">
   <span>NameButton<span>
    <svg>
    </svg>
</button>

---

最好的办法是离开：

<button>NameButton</button>

---

首先提取svg，然后更改文本，然后重新添加svg

让btn=document.getElementById（'b'）；
设svg=btn.children[0]
btn.textContent=“已更改”；
附加子对象（svg）

姓名按钮
以下是如何使用
TextNode.prototype.wholeText正确执行此操作：


const-button=document.querySelector（'button'）；
const buttonextnode=button.childNodes[0]；
button.removeChild（button.childNodes[0]）；
button.insertBefore（新文本（buttonTextNode.wholeText.replace（buttonTextNode.wholeText，'NewNameForTheButton'））、button.firstElementChild）

姓名按钮

未触及
最好的解决方案是简单地将文本包装成一个
span
，如其他答案所述。但是，如果出于任何原因，您坚持不这样做，那么您需要深入查看按钮的
childNodes
，并更改第一个按钮（即文本节点）的
textContent


document.querySelector（'button'）.childNodes[0].textContent=“Hellow”

姓名按钮
您可以将文本包装到span标记中，并使用childNode进行更改


document.querySelector（“按钮”）.childNodes[1]。textContent=“Something”

姓名按钮
将名称包装在
span
或
div
元素中，它们会更改它们“但不要触摸图标”。也许您的意思是不要替换图标。对
<button>NameButton</button>

button:after {
    background-image: url('my-file.svg');
}