为什么 Bootstrap 模态不渲染动态添加的内容？

Question

我试图动态地将内容添加到模态主体，但发现 html 标签没有呈现，而是显示为原始文本。这就是我正在做的事情：我有一个 html 用户表，其中一列显示一个按钮，单击该按钮时会将分号分隔的组列表传递给脚本，以用 html 中断字符替换分号
:

<button id="showGroupsModal_2321" title="Show Groups" onclick="showGroupsModal(2321,'Group 1;    Group 2; Group 3; Group 4')" data-bs-toggle="modal" data-bs-target="#GroupsModal" type="button">Show Groups</button>

函数如下： 例如：currArray =“2321，第 1 组；第 2 组；第 3 组；第 4 组”

const showGroupsModal = (userName, Id, currArray) => {
    let groups = currArray.split(',')[1];
    let groupsWithBreaks = groups.replace(/;/g, '<br>');

    let userGroupNames = document.createTextNode(groupsWithBreaks);
    let newDiv = document.createElement('div');
    newDiv.appendChild(userGroupNames);

    document.querySelector('#modal-body').append(newDiv);
}

模态渲染并显示组列表，如下所示：

<div class="modal-body" class="modal-body">
    <div>Group 1<br> Group 2<br> Group 3<br> Group 4</div>
</div>

______________________________________________________

Group 1<br /> Group 2<br /> Group 3<br /> Group 4
______________________________________________________

由于某些组名称非常长，因此目标是将每个名称放在新行上。我没有在文档中看到任何禁止动态 html 内容的内容，并且有帖子显示从外部脚本和站点加载内容，但不是按照我正在做的方式？是否有不同/更好的方法来使用数组数据来实现此目的？

Answer 1

我能够通过将分号分隔列表 [1] 拆分为另一个数组，然后迭代该数组以在 for 循环中创建 listitem 节点并将每个节点附加到一个元素来解决格式问题。

const showGroupsModal = (userName, Id, currArray) => {
    let groups = currArray.split(',')[1];
    let groupArr = groups.split(';');
    let ulTag = document.createElement('ul');

    for (var i = 0; i < groupArr.length; i++) 
    {
        let liTag = document.createElement('li');
        let liText = document.createTextNode(groupArr[i]);
        liTag.appendChild(liText);
        ulTag.appendChild(liTag);
    }

    document.querySelector('#modal-body').append(ulTag);
}