insertAdjacentHTML 代码仅适用于 Firefox

Question

这个项目是一个小型移动网站。我想通过 JS 动态地为参考书目提供 HTML。以下是在 Firefox 中完美运行的代码：

let butlerBooks = [];
fetch("butler.json").then(res => {
  return res.json();
}).then(loadedButlerBooks => {
    console.log(loadedButlerBooks);
    butlerBooks = loadedButlerBooks;
    loadBooks();
}).catch(err => {
  console.error(err);
});

const biblioItem = document.getElementById('biblioCards');
function loadBooks() {
  butlerBooks.forEach(biblioCard => {
    const biblioContent = `<div id="biblioBorder" class="biblio-card-container">
        <div id="biblioTitle" class="biblio-list-item">
          <div class="biblio-date">${biblioCard.year}</div>
          <div class="biblio-booktitle">${biblioCard.title}</div>
        </div>
        <div id="biblioExpand" class="biblio-card-expand"><img src="./img/expand.png" alt="expand button"></div>
        <div class="biblio-expanded">
          <div class="biblio-expanded-top">
            <div class="biblio-subtitle">${biblioCard.subtitle}</div>
            <div id="biblioMinimize" class="biblio-minimize"><img src="./img/minimize.png" alt="minimize button"></div>
          </div>
          <div id="biblioSubcard" class="biblio-subcard">
            <p class="biblio-booksummary">${biblioCard.summary}</p>
              <a class="biblio-btn-link" href="${biblioCard.url}" target="_blank"><button id="biblioBtn" class="biblio-btn btn" type="button" name="button">View on Goodreads</button>
          </div>
        </div>
      </div>`

  biblioItem.insertAdjacentHTML('afterbegin', biblioContent);

  if (biblioCard.series === "Patternist") {
    console.log('I\'m a Patternist Book!');
    biblioBorder.style.border = "0.2em solid #434463";
    biblioBorder.style.borderLeft = "12px solid #434463";
    biblioBtn.style.backgroundColor = "#434463";
    biblioSubcard.style.background = "rgba(67, 68, 99, 0.3)";
  } else {
    biblioBorder.style.border = "0.2em solid #5EA878";
    biblioBorder.style.borderLeft = "12px solid #5EA878";
    biblioBtn.style.backgroundColor = "#5EA878";
    biblioSubcard.style.background = "rgba(94, 168, 120, 0.3)";
}

这是 Firefox 中的代码：Bibliography Desired View 这是在其他浏览器中的样子：Other Browser's Broken view

我在 Firefox 中没有收到错误消息，但例如 Chrome 中的错误如下：

TypeError: Cannot set property 'border' of undefined
    at main.js:48
    at Array.forEach (<anonymous>)
    at loadBooks (main.js:25)
    at main.js:18
(anonymous) @ main.js:20
Promise.catch (async)
(anonymous) @ main.js:19

我不确定如何解决这个问题。是抓取问题吗？身份问题？ forEach 循环问题？究竟是什么阻止了边框属性在其他浏览器中实现？大多数现代浏览器（ES6、Arrow Functions、InsertAdjacentHTML 等）都应该支持我使用的所有 JS，所以这对我来说是一个令人头疼的问题。

提前感谢您的帮助！

Answer 1

想通了！我必须动态分配 ID，以便每个新的 HTML 实例都是唯一的。这是我的项目现在在 Chrome、Firefox 和 Safari 中的样子：All working!

这是我的代码现在的样子：

function loadBooks() {
  key = 0;
  for (i = 0; i < butlerBooks.length; i++) {
    key++;
    const biblioContent = `<div id="biblioBorder${key}" class="biblio-card-container">
        <div class="biblio-list-item">
          <div class="biblio-date">${butlerBooks[i].year}</div>
          <div class="biblio-booktitle">${butlerBooks[i].title}</div>
        </div>
        <div  id="expandBtn${key}" class="biblio-card-expand"><img src="./img/expand.png" alt="expand button"></div>
        <div class="biblio-expanded">
          <div id="expandedTop${key}" class="biblio-expanded-top">
            <div class="biblio-subtitle">${butlerBooks[i].subtitle}</div>
            <div id="minimizeBtn${key}" class="biblio-minimize"><img src="./img/minimize.png" alt="minimize button"></div>
          </div>
          <div id="expandedSubcard${key}" class="biblio-subcard">
            <p class="biblio-booksummary">${butlerBooks[i].summary}</p>
              <a class="biblio-btn-link" href="${butlerBooks[i].url}" target="_blank"><button id="btn${key}" class="biblio-btn btn" type="button" name="button">View on Goodreads</button>
          </div>
        </div>
      </div>`

  biblioItem.insertAdjacentHTML('beforeEnd', biblioContent);



const expandedTop = document.getElementById(`expandedTop${key}`);
const expandedSubcard = document.getElementById(`expandedSubcard${key}`);
const expandBtn = document.getElementById(`expandBtn${key}`);
const minimizeBtn = document.getElementById(`minimizeBtn${key}`);

      expandBtn.onclick = () => {
        expandedTop.style.display = "flex";
        expandedSubcard.style.display = "block";
        expandBtn.style.display = "none";
      };

      minimizeBtn.onclick = () => {
        expandedTop.style.display = "none";
        expandedSubcard.style.display = "none";
        expandBtn.style.display = "inline-flex";
      }
   }
};

感谢CertainPerformance 的回答！它帮助我提出了“如何使用 Javascript 使 ID 独一无二”的问题，最终导致了解决方案。