How to apply display: flex and flex-direction: row in JavaScript?

Question

I want to apply display: flex and flex-direction: row with the following code:

<ul id="myList"></ul>
<script type="text/javascript">
  const listItem = document.getElementById("myList");
  const fruits = ["Banana", "Papaya", "Mango", "Lemon"];

  for (let fruit of fruits) {
    let list = document.createElement("li");
    list.textContent = fruit;
    list.classList.add("dcode");
    listItem.appendChild(list);
  }
</script>

Answer 1

Assign the styles to the parent element that you have selected:

 listItem.style.display = 'flex'; listItem.style.flexDirection = 'row'

You can also assign them all at once:

 listItem.style.cssText = "display: flex; flex-direction: row";

Answer 2

Just add a.style for the list item elements parent and assign some cssText for display. In my example I use .style.cssText

 const listItem = document.getElementById("myList"); const fruits = ["Banana", "Papaya", "Mango", "Lemon"]; for (let fruit of fruits) { let list = document.createElement("li"); list.textContent = fruit; list.classList.add("dcode"); listItem.appendChild(list); listItem.style.cssText = 'display: flex; flex-direction: row; list-style-Type: none;' }

 <ul id="myList"></ul>