如何使用JavaScript自动创建span元素，替代手动重复编写工作

核心逻辑 #

不需要修改原有复制功能的核心流程，只需要调整shortmessage函数中获取提示span的判断逻辑：找不到对应span时，自动创建span元素并挂载到对应父容器下，就可以完全移除所有手动编写的空span标签。
这种写法不会和现有手动写的span冲突，会优先复用已存在的span元素，不会造成重复挂载。

具体代码修改 #

仅需替换shortmessage函数中获取span的相关代码，其余功能逻辑完全保留：

const shortmessage=function(e,m,t){
  // 原有逻辑：查找父容器下已存在的span
  let span=e.parentNode.querySelector( 'span' );
  
  // 新增逻辑：未找到span时自动创建
  if (!span) {
    span = document.createElement('span');
    // 将新建的span追加到和原位置一致的父容器下
    e.parentNode.appendChild(span);
  }

  span.innerText=m;
  setTimeout(()=>{span.innerText=''},700 * t)
  span.classList.add("copystatusalert");
  setTimeout(function() {span.classList.remove("copystatusalert")},700);
};

改动后的使用效果 #

• 所有原来手动写在latestatus容器里的<span></span>标签可以全部删除，HTML结构可简化为：

<div class='latestatus'>
  <p>Life is good when you have books</p> 
  <button class='copystatus btn'>Copy</button>
</div>

• 第一次点击对应模块的复制按钮时，JS会自动在当前模块末尾插入空span，专门承载复制操作的提示信息，后续操作都会复用这个自动生成的span，和手动写span的运行效果完全一致。

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