点击ul内span元素后字体样式被重置，如何保留原有样式？

问题原因 #

你遇到的样式丢失问题，本质是li.textContent += '!'的特性导致的：textContent会将元素内部所有HTML结构（包括带样式的<span>）转换成纯文本，拼接!后重新赋值，这直接销毁了原来的span元素，斜体样式自然就消失了。

解决方案 #

要保留原有DOM结构和样式，只需在li末尾追加文本节点，而非覆盖整个内容，以下是两种可行的实现方式：

方案1：使用insertAdjacentText（推荐）

该方法可直接在指定位置插入文本，完全不影响现有DOM结构：

let ul = document.querySelector('ul')

ul.addEventListener('click', function (evn) {
  let li = evn.target.closest('li');
  if (evn.target !== this) {
    // 在li末尾插入文本'!'
    li.insertAdjacentText('beforeend', '!');
  }
})

方案2：创建文本节点并追加

通过DOM API创建纯文本节点，再添加到li的子节点末尾：

let ul = document.querySelector('ul')

ul.addEventListener('click', function (evn) {
  let li = evn.target.closest('li');
  if (evn.target !== this) {
    const exclamationNode = document.createTextNode('!');
    li.appendChild(exclamationNode);
  }
})

效果验证 #

使用以上任意一种方法后，点击包含<span class="i">text</span>的li时，只会在末尾添加!，原有span元素的斜体样式会完整保留。

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