Javascript 为什么我的过滤数组结果（重新）不显示在页面上？

谁能告诉我哪里出了问题

我拼命地想让我的jquery旋转木马使用过滤数组的结果重新渲染，但今天确实遇到了一些问题

我用

wrapper

我获取对象的api数组并将其存储在moviesArray中

然后关键的是，当有人输入输入时，它会根据新过滤的数组重新呈现旋转木马

function populateCarousel() {
  var moviesArray = [];
  var tempResultsArr = [];

  fetch('http://localhost:3000/getdata')
    .then((res) => res.json())
    .then((json) => {
      moviesArray = json;

// ===== if NO searchTerm is entered ====
// THIS ONE WORKS

      if (typeof searchTerm === 'undefined') {
        moviesArray.map((each) => {

          var eachTile = document.createElement("a");
          var imageForEachTile = document.createElement("img");
          imageForEachTile.setAttribute('src', each.poster);
          eachTile.setAttribute("class", "carousel-item thumbnail-item");
          eachTile.setAttribute("href", "#linkToSomeWhere");
          eachTile.innerHTML = each.title;
          eachTile.appendChild(imageForEachTile);
          wrapper.appendChild(eachTile);
        })

      } else {


        // ===== if a searchTerm *IS* entered ====
        // THIS ONE DOESN'T WORK!
          while (wrapper.firstChild) {
              wrapper.removeChild(wrapper.firstChild);
          }

          function checkWords(searchTerm, arr) {
              let st = searchTerm.toLowerCase();
              return arr.filter(each => each.title.toLowerCase().indexOf(st) === 0);
          }

          let newArr = checkWords(searchTerm, moviesArray);

          newArr.map((each) => {
            var eachTile = document.createElement("a");
            var imageForEachTile = document.createElement("img");
            imageForEachTile.setAttribute('src', each.poster);
            eachTile.setAttribute("class", "carousel-item thumbnail-item");
            eachTile.setAttribute("href", "#linkToSomeWhere");
            eachTile.innerHTML = each.title;
            eachTile.appendChild(imageForEachTile);
            wrapper.appendChild(eachTile);
          })

          // this logs out correctly & when i go into the html
          // the correct searchresults are there, a and img tags.
          // but they dont show.
          console.log('wrapper: ', wrapper);
      }
    })
}

您注意到IF/ELSE两侧的.map（（每个）…是相同的

它确实正确地创建了元素和属性，并且添加了它们，因为a）我可以注销它们，但是b）我可以在chrome中检查HTMl并在那里看到它们

---

但为什么他们没有真正表现出来呢

我想这是一个CSS问题。你的HTML在那里，但不可见。。。如果在（wrapper.firstChild）{wrapper.removeChild（wrapper.firstChild）；}时注释掉

，会怎么样？如果您只是从
wrapper
中删除所有内容，也许您可以将其重写为
wrapper.html（“”）？我想这是两个IF/ELSE分支之间的唯一区别。@gregn3谢谢你，杜德-我注意到css正在从materialize.min.css库中通过一个
显示：none
，但不知道为什么。当我向一位同事展示这种东西时，在他将代码移出或放入fetch之前&它起了作用。不过，我今天尝试的东西都不管用(