JavaScript- best way to create div and then modify their properties

Im new to Javascript and Im working on the CS50 mail problem. Im working on building my "sent" page and I was wondering how I can modify the css properties of a div that I created. Id like to create a border around the div box and then modify the text and spacing inside each box. Im able to get the data to appear in the html however, I cant get to the attributes to modify. So far I've tried two ways but they havent been working for me.

in my css file I have both I am accessing .test (for the query associated with newElement) and I have #row (for the Ids associated with the query selector. )

Any help would be greatly appreciated !

Here's the code so far:

fetch(`/emails/${mailbox}`)
    .then(response => response.json())
    .then((emails) => {
      //do something
      
      emails.forEach( (item) =>
        
      { if (item.id > 10 ){
        
        //manually create div
        document.querySelector('#sent-view').innerHTML += `
        
        <div id='row'>
        ${item.sender} ${item.subject} ${item.timestamp}
        </div>
        
        `
         //use createElement
        var newElement = document.createElement('div');
        newElement.id = item.id; newElement.className = 'test'
        newElement.innerHTML = `${item.sender}  ${item.subject}  ${item.timestamp}`
        document.body.appendChild(newElement);

      } else {
        
        document.querySelector('#sent-view').innerHTML += `
        
        <div id='row'>
        ${item.sender} ${item.subject} ${item.timestamp}
        </div>
        `
      }
      })
    })
    .catch(error => {
    console.log('Error:', error);
});

}

css:

.test {
    border: 1px solid black ;
}

#row{
    border: 1px solid black ;
}