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