JavaScript: how to render a border around each line item from innerHTML

user_5179643 0
Viewed 51

I have some JavaScript that renders line-item details of some orders. Here is a code snippet:

  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>
              `
}

How would I render a border around each line item order?

Thanks in advance.

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

EDIT

Following the advice of @Anton Neverov, I have the following:

  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
}

The border does not seem to be rendering. What did I miss here? Thank you.

javascript
2 Answers

You need to add border css rules to every div. Somthing like:

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>
  `
}

Also, you can create a new class in CSS and add this class to order's div:

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

Anton's answer is valid.

I've created a live working snippet here:

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>

And you can see it on Codepen too.

user_164082720
Related