Skip to content

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

TylerH
Loc Dang

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>

Advertisement

Answer

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";