如何从 javascript 添加 html 元素 [关闭]

我不确定您的其余代码，因为您尚未提供 html 和 CSS 文件。 无论如何，如果其他一切正常，阅读您的代码并使用 customId 作为字符串而不是变量可能是问题所在。

document.getElementById('customid').style.display = "block";

尝试将其更改为

document.getElementById(customid).style.display = "block";

对 display = “none” 情况执行相同的操作

您尝试根据复选框状态设置显示属性的方式似乎存在问题。此外，您尝试设置动态创建的 div 的 ID 的方式也存在问题。 试试这个：

用于获取事件处理程序中单击的复选框元素。event.target

删除不必要的复选框状态检查，因为它是多余的。(if (FilterDropdownsElem[i].checked == true))

用于在取消选中相应的复选框时删除动态创建的 div。div.remove()

let ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
let FilterDropdownsElems = document.querySelector('.FilterDropdowns');
let FilterDropdownsElem = FilterDropdownsElems.querySelectorAll('[type=checkbox]');
let customid = "";

for (let i = 0; i < FilterDropdownsElem.length; i++) {
    customid = FilterDropdownsElem[i].id + i; // Use a simpler customid
    
    FilterDropdownsElem[i].addEventListener('click', function (event) {
        let checkbox = event.target;
        let divId = checkbox.id + i;
        let div = document.getElementById(divId);

        if (checkbox.checked) {
            // If the checkbox is checked, create the div if it doesn't exist
            if (!div) {
                ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto" id="${divId}">
                    <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
                        ${checkbox.id} <i class="close fas fa-times" style="font-size: small;"></i>
                    </div>
                </div>`;
            }
        } else {
            // If the checkbox is unchecked, remove the corresponding div
            if (div) {
                div.remove();
            }
        }
    });
}

我总是建议委托，所以我将重构而不是调试您的代码，其中包含一些奇怪的语句，例如您的 .bind

下面是从 filterDropdown 容器和 ChoosenFiltercontainer 委托的版本

我将复选框 ID 作为数据属性添加到关闭处，因此我们可以在关闭过滤器时取消选中它

const ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
document.querySelector('.FilterDropdowns').addEventListener('click', (e) => {
  const tgt = e.target;

  if (!tgt.matches("input[type=checkbox]")) return;
  let elementId = `${tgt.id}_container`; // Create a unique ID for the container
  let filterElement = document.getElementById(elementId);
  if (!filterElement) {
    console.log('creating div');
    ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto filter" id="${elementId}" style="display: none;"><div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">${tgt.id} <i data-id="${tgt.id}" class="close fas fa-times" style="font-size: small;"></i></div></div>`;
    filterElement = ChoosenFiltercontainer.lastChild;
  }
  filterElement.style.display = tgt.checked ? 'block' : 'none';
});
ChoosenFiltercontainer.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.matches('i.close')) {
    const filterId = tgt.dataset.id;
    document.getElementById(filterId).checked = false;
    tgt.closest('div.filter').style.display = 'none';
  }  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="ChoosenFiltercontainer">
  <!-- Selected filters will be displayed here -->
</div>

<div class="FilterDropdowns">
  <!-- Example checkboxes -->
  <label><input type="checkbox" id="filter1">Filter 1</label>
  <label><input type="checkbox" id="filter2">Filter 2</label>

</div>