JavaScript: how to change CSS style of a created range?

Question

  newNode = document.createElement("span");
  newNode.innerHTML = "text";
  range.insertNode(newNode);

Is it possible to make text in innerHTML with a red background color? I want to add style = "background-color: red" to the range just created. Is it possible? Or should it have some id, and then I can change this range using jQuery ?

Answer 1

Better give class name for range

<style>
    .spanClass { background-color: red; }
</style>

newNode.className = "spanClass";

Answer 2

Simple enough: -

newNode.style.backgroundColor = "red";

Answer 3

:

var spanTag1 = document.createElement('span');
spanTag1.innerHTML = '<span style="color:red">text</span>';

class js css class

var spanTag1 = document.createElement('span');
spanTag1.className = "mystyle";

style class

<style> 
    .mystyle {
        color:red;
    }
</style>