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

如何解决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 上看到。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

其他编程问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?