Why cannot apply style using CSS class in JS function?

Question

In this code the function sayHi() doesn't write text with style. Why? How do I apply CSS class to a document.write in a function?

.class1 {
  color: red;
  font-size: 400%;
}

<script language="javascript" type="text/javascript">
  document.write("<h1 class=class1>Hello World</h1>");

  function sayHi() {
    document.write("<h1 class=class1>Goodbye!</h1>");
  }
</script>

<button onclick="sayHi()">Click me</button>

document.write used that way (in an event) has side effects that result in the style being lost ... so ... document.write is old old school, and should never be used, except maybe in inline code that runs during page load — Jaromanda X
– Jaromanda X, Commented May 16, 2018 at 3:58

CertainPerformance · Accepted Answer · 2018-05-16 04:02:58Z

6

document.write is document.wrong - whenever you use it after the page has been loaded, it replaces the whole page with the new HTML string. That's pretty much never a good idea. In this case, it's replacing the page including your CSS, so there's no style to apply to the class1.

Use proper DOM methods instead:

  function sayHi() {
    const h1 = document.body.appendChild(document.createElement('h1'));
    h1.className = 'class1';
    h1.textContent = 'Goodbye!';
  }

.class1 {
  color: red;
  font-size: 400%;
}

<h1 class=class1>Hello World</h1>
<button onclick="sayHi()">Click me</button>

Or, if you want to remove the existing elements first (but not the style), clear document.body:

  function sayHi() {
    document.body.textContent = '';
    const h1 = document.body.appendChild(document.createElement('h1'));
    h1.className = 'class1';
    h1.textContent = 'Goodbye!';
  }

.class1 {
  color: red;
  font-size: 400%;
}

<h1 class=class1>Hello World</h1>
<button onclick="sayHi()">Click me</button>

edited May 16, 2018 at 4:02

answered May 16, 2018 at 4:00

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromanda X Over a year ago

whenever you use it - simplistic - during initial page load it does not :p

Jaromanda X Over a year ago

document.write is document.wrong - I'm using that from now on :p

brk Over a year ago

If that is the case then how initially the document.write is writing 'Hello' without removing the button element and also the style element

Collectives™ on Stack Overflow

Why cannot apply style using CSS class in JS function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related