如何解决音频DOM转移提交时的重复无效音频问题？

问题根源 #

提交按钮的处理逻辑存在重复操作：

• 先用messageBox.innerHTML把内容（包括音频播放器的静态HTML）复制到messageDiv，这部分是没有绑定事件、没有真实<audio>元素的空壳结构
• 又调用messageDiv.appendChild(audioPlayer)把带事件和真实音频的DOM节点移过去，最终导致messageDiv里出现两份播放器，其中空壳的那份无法播放

修复方案 #

删掉复制innerHTML的代码，直接将messageBox中的所有子节点（包括文本和音频播放器）移动到新建的messageDiv中，既避免重复，又完整保留播放器的功能。

修改后的代码（仅替换submit事件部分） #

submitButton.addEventListener("click", () => {
  if (messageBox.childNodes.length > 0) {
    const messageDiv = document.createElement("div");
    // 创建p标签包裹内容，保持原有结构
    const p = document.createElement("p");
    // 将messageBox的所有子节点移动到p标签中
    while (messageBox.firstChild) {
      p.appendChild(messageBox.firstChild);
    }
    messageDiv.appendChild(p);

    bottomRightContainer.insertBefore(
      messageDiv,
      bottomRightContainer.firstChild,
    );
    bottomRightContainer.style.display = "block";
    // 清空messageBox
    messageBox.innerHTML = "";
    audioFiles = [];
    document.execCommand("removeFormat", false, null);
  }
});

完整说明 #

• 用while (messageBox.firstChild)循环把messageBox里的所有节点（包括文本节点和音频播放器节点）移动到p标签，确保没有遗漏
• 不再依赖innerHTML复制内容，避免生成无功能的空壳播放器
• 保留了原有的结构（用p标签包裹内容），同时保证音频播放器的事件和功能完整迁移

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