insertAdjacentHTML踩坑实录：AI没搞定的问题，我给搞定啦

今天开发「Todo-List」应用新特性：任务支持配置标签功能。

在做添加标签的美化效果：点击【+标签】按钮，自动转换为可编辑标签名的输入框。

用AI编写效果，很快就编码完了。

💡提示词：请优化标签在页面的显示方式，要求： 1.创建任务或更新任务时，可以显示数据库现有标签供用户选择； 2.用户在创建或更新任务时，可以通过选择或取消选择的方式来设置任务关联的标签； 3.用户在创建或更新任务时，可以新增标签，在现有标签列最后是一个＋标签，点击该标签即可转换为标签编辑模式进行添加新标签，而后添加完新标签，在新标签后一个又出现新的＋标签； 4.创建或更新任务中，除＋标签外，数据库已有标签的名字后面可以以数字形式显示当前标签关联任务数据； 5.创建或更新任务时，除＋标签外，显示数字是0的标签可以通过标签末端的×进行删除。请实现上述功能！

但是尬尴：重复点击【+标签】按钮，监听事件仅首次生效，后续点击都不生效。而且关键是给AI说明了问题场景后，AI没修复！

💡提示词：当前+标签存在bug，点击首次可以生效转变为编辑模式，使用×关闭后，重新点击+标签，无法再次转换为编辑模式。要求实现可以重复点击和转换

（PS：为了证明AI没修复对，此处附上AI修复方式的截图呢）

靠AI有时候确实也是靠不住，还是得靠自己啊。

一波调试定位，发现这行代码: selector.insertAdjacentHTML('beforeend', inputHtml)，前后两次执行效果竟然不一样。

这时候，第二个AI大佬就该登场了。(PS：毕竟我前端代码也不熟，还是得仰仗AI啊)

insertAdjacentHTML() 是 DOM 操作 API，用于在指定位置插入 HTML 字符串。如果元素有id，且id重复插入，那么就会出现问题。

html 复制代码

<!-- 第一次插入 -->
<input id="myInput" type="text">

<!-- 第二次插入（相同ID） -->
<input id="myInput" type="text"> <!-- 重复ID，事件可能失效 -->

好吧，检查了下代码，确实是这个原因。

最终修复方式也很简单，id动态化。

javascript 复制代码

generateRandomId() {
  // 时间戳确保唯一性，随机数增加安全性
  return `new-tag-input-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}

// 显示新增标签输入框
showAddTagInput() {
    const addBtn = document.getElementById('add-tag-btn');
    if (!addBtn) return;

    // 生成当前counter值对应的ID
    const currentId = this.generateRandomId();

    const inputHtml = `
        <span class="tag-input-mode" id="tag-input-mode">
            <input type="text" id="${currentId}" placeholder="标签名" maxlength="20">
            <button class="btn-cancel" id="cancel-add-tag">×</button>
        </span>
    `;

    addBtn.replaceWith(document.createElement('span'));
    const inputContainer = document.getElementById('tag-input-mode');
    if (inputContainer) {
        inputContainer.outerHTML = inputHtml;
    } else {
        const selector = document.getElementById('tags-selector');
        selector.insertAdjacentHTML('beforeend', inputHtml);
    }

    // 绑定事件
    // ...
}

所以，前端的开发同学要留意啦，insertAdjacentHTML 这个API使用的时候可以要注意插入的元素的id或class不能重复哦，不然会出现二次点击事件不生效的呢。

今天分享的内容就到这了，感谢阅读，欢迎三连哦！