Mit Javascript erzeugte Elemente und CSS

[Sebastian]

Hallo Leute,
ich bräuchte kurz mal Hilfe:
Ich habe erst in meinem Stylesheet einige Eigenschaften für Elemente einer Klasse definiert.
  So in etwa: .xyz {background-Color: #00FF00; width: 100%;}
Dann habe ich mit Javascript ein Element mit besagter Klasse erzeugt:
  ~~~javascript var div = document.createElement('div');
  div.class = 'xyz';
  div.innerHTML = '...';

  
Das Problem: das Div-Element ist nicht farbig!  
  
Ich habe hier schon oft gelesen, dass man nicht unbedingt mit `.style`{:.language-javascript} das Aussehen einstellen soll, sondern mit CSS...  
Könnte mir bitte jemand verraten wie ich das anstellen soll?  
  
Sebastian

[M.]

Mahlzeit,

Könnte mir bitte jemand verraten wie ich das anstellen soll?

Indem du das erzeugte Element auch noch in den DOM einhängst:

document.body.appendChild(div);

[Sebastian]

Indem du das erzeugte Element auch noch in den DOM einhängst:
document.body.appendChild(div);

Das habe ich bei mir auch schon gemacht... ich habe es hier nur der Knappheit weggelassen.
Element ist an's DOM angehängt - und es ist nicht farbig..

Sebastian

[hotti]

hi,

div.class = 'xyz';

hier knallts, weil: class ist ein reserviertes Wort in JS. Nutze

div.className = 'hervorgehoben';

stattdessen.

PS: Und mach die verflixte Konsole auf ;)

[Sebastian]

div.class = 'xyz';

hier knallts, weil: class ist ein reserviertes Wort in JS. Nutze

div.className = 'hervorgehoben';

stattdessen.

Bingo!!! Und schon funktioniert es. Vielen Dank!

Sebastian