JavaScript：如何在innerHTML 中围绕每个行项呈现边框

问题描述

我有一些 JavaScript 可以呈现某些订单的订单项详细信息。这是一个代码片段：

  fetch(`/orders/${businessUnit}`)
    .then(response => response.json())
    .then(orders=> {

  // create a Div for each order
  orders.forEach(order => {
    const element = document.createElement('div');
    element.innerHTML = `
                  <span class="buyer" col-3"> ${order.buyer} </span>
                  <span class="seller" col-3"> ${order.seller} </span>
                  <span class="timestamp" col-3"> ${order.timestamp} </span>
              `
}

如何在每个订单项 order 周围呈现边框？

提前致谢。

############

编辑

按照@Anton Neverov 的建议，我有以下几点：

  emails.forEach(order=> {
    const element = document.createElement('div');
    element.classList.add('border-class')
    element.style.padding = '5px';
    element.innerHTML = `
                  <div class='border-class'>
                  <span> ${order.buyer} </span>
                  <span> ${order.seller} </span>
                  <span> ${order.timestamp} </span>
                  </div>
              `

CSS

.border-class {
    border: 1px solid black
}

边框似乎没有渲染。我在这里错过了什么？谢谢。

解决方法

您需要为每个 div 添加边框 css 规则。 类似的东西：

orders.forEach(order => {
  const element = document.createElement('div');
  element.style.border = '1px solid black';
  element.innerHTML = `
    <span class="buyer col-3"> ${order.buyer} </span>
    <span class="seller col-3"> ${order.seller} </span>
    <span class="timestamp col-3"> ${order.timestamp} </span>
  `
}

此外，您可以在 CSS 中创建一个新类并将该类添加到订单的 div 中：

element.classList.add('border-class');

,

安东的回答是有效的。

我在这里创建了一个实时工作片段：

var emails = [1,2,3,4,5];

emails.forEach(order=> {
    const element = document.createElement('div');
    element.style.padding = '5px';
    element.innerHTML = `
                  <div class='border-class'>
                  <span>Buyer: ${order.buyer} </span>
                  <span>Seller: ${order.seller} </span>
                  <span>Timestamp: ${order.timestamp} </span>
                  </div>
                  `
    const parentContainer = document.getElementById("parent-container");
    parentContainer.appendChild(element);
});

.border-class{
  border: 1px solid black;
}

<div id="parent-container"></div>

您也可以在 Codepen 上看到。