点击按钮后h5文本更新但颜色未变的问题及解决办法

问题根源 #

你创建了带first类的<h5>元素，但最后只提取了这个新元素的文本内容，赋值给原有<h5>的innerHTML——这相当于只替换了文字，新元素的first类根本没作用到页面上实际显示的那个<h5>上。原有<h5>没有first类，自然不会应用蓝色样式。

可行解决办法 #

方法1：直接修改原有元素（最简洁） #

不需要创建新元素，直接给页面上已有的<h5>添加类并修改文本：

const btn = document.querySelector(".test");
btn.addEventListener("click", () => {
  const targetH5 = document.getElementById('position');
  targetH5.textContent = 'Blue updated.';
  targetH5.classList.add('first');
});

如果不需要复用first类，也可以直接设置行内样式：

targetH5.style.color = 'blue';

方法2：用新元素替换原有元素 #

如果坚持要创建新元素，需要把新元素替换掉页面上的旧<h5>，而不是只取文本：

const btn = document.querySelector(".test");
btn.addEventListener("click", () => {
  const a1 = document.createElement('h5');
  a1.className = "first";
  a1.textContent = 'Blue updated.';
  const position = document.getElementById('position');
  position.parentNode.replaceChild(a1, position);
});

方法3：修改元素结构赋值（不推荐） #

如果一定要用HTML结构赋值的方式，可以直接替换整个元素的HTML代码：

const btn = document.querySelector(".test");
btn.addEventListener("click", () => {
  const a1 = document.createElement('h5');
  a1.className = "first";
  a1.textContent = 'Blue updated.';
  document.getElementById('position').outerHTML = a1.outerHTML;
});

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