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

问题描述 投票:0回答:1

我试图动态地将内容添加到模态主体,但发现 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 内容的内容,并且有帖子显示从外部脚本和站点加载内容,但不是按照我正在做的方式?是否有不同/更好的方法来使用数组数据来实现此目的?

modal-dialog
1个回答
0
投票

我能够通过将分号分隔列表 [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);
}
© www.soinside.com 2019 - 2024. All rights reserved.