使用document.createElement添加按钮时自动生成<br>元素的问题

你遇到的自动<br>问题，百分百是来自createButtonHTML函数——这个函数大概率是通过拼接HTML字符串生成按钮，而字符串里不小心带了换行或者<br>标签，导致插入到li里时被解析成了换行元素。

修正方案1：改用document.createElement实现按钮创建 #

把createButtonHTML改成纯DOM创建的方式，彻底避免HTML字符串解析带来的意外：

function createButtonHTML(text, btnId) {
  const btn = document.createElement('button');
  btn.id = btnId;
  btn.textContent = text;
  return btn;
}

修正方案2：清理createButtonHTML的HTML字符串 #

如果一定要用HTML字符串生成按钮，确保字符串里没有多余的换行或<br>，比如：

function createButtonHTML(text, btnId) {
  // 注意：不要在字符串里加换行或<br>
  return document.createRange().createContextualFragment(`<button id="${btnId}">${text}</button>`).firstChild;
}

逻辑验证 #

你当前的li创建逻辑本身没问题：设置innerText只会插入纯文本，不会生成<br>，问题肯定出在btn元素的生成过程里。替换createButtonHTML的实现后，多余的<br>就会消失。

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