如何更改div中的文本而不更改div中的任何其他元素

问题描述：

我有一个带文本的div和一个用作链接的图标。我希望在按钮点击时更改文本而不影响图标。

innerHTML和innerText都使图标消失。

<div class="title" id='title'>Text I want to change
 <a href="https://link.com" target=_blank>
  <img src="icon.svg"id='icon'>
 </a>
</div>

<button id='button'>click here to change text<button>

function changeText(text) {
  document.getElementById("title").innerText=text
}
const button = document.getElementById('button');
button.addEventListener('click', () => changeText('the new text I want'));

文本正确更改但图标消失。将图标移到div之外当然可以解决问题，但我不想这样做。

解决方案：

使用element.innerText()，您基本上会覆盖div的整个内容 - 包括其他html元素，例如锚标记。

有一个孩子附在你的div上，实际上是你的文字。您可以通过document.getElementById(“title”)。firstChild以及它的.data属性来引用它。

function changeText(text) {
  document.getElementById("title").firstChild.data = text;
}
const button = document.getElementById('button');
button.addEventListener('click', () => changeText('the new text I want '));

<div class="title" id='title'>Text I want to change
  <a href="https://link.com" target=_blank><img src="icon.svg" id='icon'></a>
</div>

<button id='button'>click here to change text<button>