模态框中用table替换div后出现多余<br>标签，如何消除？

这种情况我碰到过好几次，大概率是这几个原因导致的，咱们一步步排查解决：

1. 先检查原div的初始内容 #

你说控制台看生成的table本身没有<br>，那很可能是原来的divSInfo里早就藏着这些标签！有时候咱们在写HTML的时候，编辑器里的换行或者不小心敲的多余标签，肉眼不太容易发现，但实际DOM里已经存在了。

你可以打开浏览器的开发者工具（F12），找到divSInfo这个元素，查看它的innerHTML，看看初始状态下是不是已经有这些<br>了。如果有的话，直接把HTML里的多余标签删掉就行。

2. 替换内容时要彻底清空原div #

如果原div初始是干净的，那大概率是你替换内容的方式不对。比如你用了appendChild或者append方法，这种是在原div内容后面追加新元素，而不是替换掉全部内容——如果原div里之前有隐藏的<br>（比如之前渲染过其他内容留下的），就会留在table前面。

正确的做法是先清空原div，再插入table：

// 获取目标div
const divSInfo = document.getElementById('divSInfo');
// 彻底清空所有内容
divSInfo.innerHTML = '';
// 插入动态生成的table
divSInfo.appendChild(yourTableElement);

或者直接用innerHTML赋值来覆盖：

// 假设yourTableHTML是你生成的table的HTML字符串
divSInfo.innerHTML = yourTableHTML;

3. 检查动态生成table的代码 #

虽然你说table本身没问题，但还是可以再确认下生成过程：比如用字符串拼接HTML的时候，是不是不小心多写了换行或者<br>？用模板字符串的时候有没有多余的空行被转成了<br>？比如有些情况下，模板字符串里的换行在渲染时会被解析成空格，但如果你的代码里有手动加的<br>就会出问题。

4. 排查框架渲染的影响 #

看你的模态框用了Bootstrap的modal类，也有可能是框架的渲染逻辑导致的？不过这种情况比较少见。你可以检查下模态框的结构是不是符合Bootstrap的规范，比如有没有嵌套错误的div层级，导致框架自动生成了多余的元素。

按照上面的步骤排查，应该很快就能找到问题所在啦！

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