修改父元素textContent致子元素消失，求原因及高效解决方法

问题原因 #

调用parentEle.textContent = 'bye'时，textContent会完全替换元素的所有子节点——不管是文本节点还是像<img>这样的元素节点，都会被清除，只留下指定的文本内容。所以原来<li>里的图片会被一并删掉，只显示"bye"文本。

高效解决方案 #

方案1：精准修改目标文本节点 #

遍历父元素的子节点，找到对应的文本节点直接修改，不影响其他子元素：

const helloImage = document.querySelector('img')
helloImage.addEventListener('click', (e) => {
  const parentEle = e.target.parentElement
  // 遍历子节点，找到非空的文本节点
  for (const node of parentEle.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      node.textContent = 'bye'
      break
    }
  }
})

方案2：给文本单独加容器（最推荐） #

修改HTML结构，把需要更新的文本放在<span>容器里，后续直接操作这个容器：

<body>
  <ul>
    <li><span> Hello </span><img src="img/hello.png"></li>
  </ul>
</body>
<script>
  const helloImage = document.querySelector('img')
  helloImage.addEventListener('click', (e) => {
    const textContainer = e.target.parentElement.querySelector('span')
    textContainer.textContent = 'bye'
  })
</script>

方案3：使用innerHTML（注意安全风险） #

如果父元素结构简单，可通过拼接HTML保留图片，但不要用在包含用户输入的场景，避免XSS攻击：

const helloImage = document.querySelector('img')
helloImage.addEventListener('click', (e) => {
  const parentEle = e.target.parentElement
  // 保留img元素，替换前面的文本
  parentEle.innerHTML = 'bye ' + parentEle.innerHTML.replace(/^.*?(?=<img)/, '')
})

内容的提问来源于stack exchange，提问作者Nick Napolitano