Bootstrap模态框无法渲染动态添加内容的原因及解决方案

问题原因 #

你用document.createTextNode()创建文本节点时，浏览器会把所有内容（包括<br>标签）都当成纯文本解析，不会识别HTML标签，所以才会直接显示<br>字符串。

解决方案 #

方法1：使用innerHTML直接渲染HTML

修改你的函数，把创建文本节点的逻辑换成innerHTML，让浏览器解析HTML标签：

const showGroupsModal = (userName, Id, currArray) => {
    let groups = currArray.split(',')[1];
    // 替换分号为<br>，同时去掉分号后的多余空格
    let groupsWithBreaks = groups.replace(/;\s*/g, '<br>');

    let newDiv = document.createElement('div');
    newDiv.innerHTML = groupsWithBreaks;

    // 清空模态框原有内容，避免重复添加
    const modalBody = document.querySelector('#modal-body');
    modalBody.innerHTML = '';
    modalBody.appendChild(newDiv);
}

方法2：拆分数组生成独立元素（更推荐）

直接把组列表拆分成数组，为每个组创建独立的DOM元素，这样不仅能实现每行一个组，还能更好地控制样式，同时避免innerHTML可能带来的XSS风险：

const showGroupsModal = (userName, Id, currArray) => {
    let groupsStr = currArray.split(',')[1];
    // 拆分组字符串，去除每个组前后的空格，过滤空内容
    const groups = groupsStr.split(';').map(group => group.trim()).filter(Boolean);

    const modalBody = document.querySelector('#modal-body');
    // 清空原有内容
    modalBody.innerHTML = '';

    const container = document.createElement('div');
    groups.forEach(group => {
        const groupItem = document.createElement('div');
        // 也可以用<p>、<span>等标签，根据样式需求调整
        groupItem.textContent = group;
        container.appendChild(groupItem);
    });

    modalBody.appendChild(container);
}

这种方式下，每个组是独立的DOM元素，后续如果需要给组名加样式（比如过长时自动换行、添加间距）会更灵活。

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