使用insertAdjacentHTML渲染Firebase条目时删除按钮点击触发报错

两类报错的核心诱因完全一致，均来自通过insertAdjacentHTML拼接内联onclick事件时的参数处理缺陷，和按钮ID匹配度、数据库条目存在性没有关联：

• 首条条目抛出Uncaught SyntaxError: Invalid or unexpected token：拼接生成的onclick代码段中，未对Firebase返回的child key携带的特殊字符（单引号、反斜杠、换行符、双引号）做转义，导致浏览器解析行内JS时代码块被意外截断，直接触发语法解析失败。
• 其余条目抛出Uncaught ReferenceError: 对应条目键值 is not defined：传入deleteBanner方法的key参数没有添加字符串边界引号，浏览器会把传入的key值识别为全局JS变量进行查找，找不到匹配变量自然抛出未定义错误，后续的confirm确认弹窗逻辑根本不会被执行。

• 优先替换内联onclick的绑定逻辑，从根源规避字符串转义风险：生成卡片DOM时，将每条banner的key存储在按钮的自定义属性上，例如<button class="delete-banner-btn" data-banner-key="${childSnapshot.key}">删除</button>，在全局层面通过事件委托监听所有删除按钮的点击事件，回调中通过event.target.dataset.bannerKey获取对应条目key，再执行删除逻辑。这种写法不需要把key内嵌到JS代码字符串中，完全不会触发转义、语法解析类错误。
• 如果需要保留原有内联onclick的写法，必须对传入的key参数做字符串包裹+转义处理，正确的拼接示例为：onclick="deleteBanner('${childSnapshot.key.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}')"，确保浏览器解析时能正确把key识别为字符串参数传入方法。
• 开发阶段可提前在控制台打印完整的待插入HTML字符串，逐行检查onclick部分的JS语法正确性，避免特殊字符遗漏导致的解析失败。

内容的提问来源于stack exchange，提问作者Emili Bellot Pulido