how to change style on multiple classes after creating the classes?

Issue

When the change event happens I want to create a new span element with the value on input field.

How can I style every new span element with color red for example?

If I create for example 3 spans I have to specify which one I want to style like design[0].style.color = "red"; so this one will add the color red on the 1st span, so my goal its to make all spans i create with the color = "red"

function getMessage() {
  var inel = document.getElementById("msg"),
    mainel = document.getElementById("main");


  let create = document.createElement("SPAN");
  create.innerHTML += inel.value + "<br>";
  mainel.appendChild(create)
  let att = document.createAttribute("class")
  att.value = "list"
  create.setAttributeNode(att)

  var design = document.getElementsByClassName("list");

  design.style.color = "red";

  msg.value = "";
}

<div id="main">
  <input type="text" id="msg" placeholder="type somthing here" onchange="getMessage()"><br>

</div>

Solution

Before you append the new span, add a class name to it. That way you can give all your spans the same class and stole them accordingly.

Answered By - Jonathan Knoll