如何从 javascript 添加 html 元素

Question

我试图通过向复选框添加事件侦听器函数来检查复选框时创建一个芯片，但它没有发生。我认为该元素没有被插入到 html 中。 这是代码

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= customid + FilterDropdownsElem[i].id + i;
        FilterDropdownsElem[i].addEventListener('click', function (customid) {
        ChoosenFiltercontainer.innerHTML += `<div class="col-md-auto " id=${customid}  style="display:none;" >
          <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
            ${FilterDropdownsElem[i].id} <i class="close fas fa-times" style="font-size: small;"></i>
          </div>
        </div>`;
        if (FilterDropdownsElem[i].checked == true) {
          document.getElementById('customid').style.display = "block";
        }
        else {
          document.getElementById('customid').style.display = "none";
        }
      }.bind(this,customid))
      }
    

我认为我没有正确使用innerHTML属性

Answer 1

我不确定你的其余代码，因为你没有提供 html 和 CSS 文件。 无论如何，如果其他一切都很好的话，阅读您的代码，并使用 customId 作为字符串而不是变量可能会出现问题。

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

尝试将其更改为

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

对显示=“无”的情况执行相同的操作