How to create a style tag using JavaScript

# Create a style tag using JavaScript

To create a style tag:

Use the document.createElement() method to create the style tag.
Use the textContent property to assign styles to the tag.
Add the style tag to the head using the appendChild() method.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Apple, Pear, Banana</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const style = document.createElement('style');

style.textContent = `
  #box {
    width: 100px;
    height: 100px;
    background-color: salmon;
    color: white;
  }

  body {
    background-color: lightgrey;
  }
`;

document.head.appendChild(style);

create style tag using javascript

The code for this article is available on GitHub

We used the document.createElement() to create a style element.

The only argument we passed to the method is a string that specifies the type of element to be created.

The createElement method returns the newly created element.

We used the textContent property to assign some styles to the element.

Notice that we used backticks `` (not single quotes) to be able to use a multi-line string when setting the element's text content.

The textContent property represents the text content of the element and its descendants. This is exactly what we need when adding styles to a style tag.

The document.head property returns the head element of the current document.

We called the appendChild() method to append the style tag to the head element on the page.

If I open the page from the example, I can see that the style tag has been created successfully.

style tag created

# Create a style tag using insertAdjacentHTML

You can also use the Element.insertAdjacentHTML() method to create a style tag.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Apple, Pear, Banana</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const style = `
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: orange;
    color: white;
  }

  body {
    background-color: lightgrey;
  }
</style>
`;

document.head.insertAdjacentHTML('beforeend', style);

create style tag using insertadjacenthtml

The code for this article is available on GitHub

Make sure to wrap the contents of the style variable in backticks ``, not in single quotes.

We placed the style tag right before the closing head tag.

The insertAdjacentHTML() method takes the following 2 parameters:

position - the position relative to the element where the HTML should be inserted. Can be one of the following:
- beforebegin - before the element itself.
- afterbegin - just inside the element, before its first child.
- beforeend - just inside the element, after its last child.
- afterend - after the element itself.
text - the string to be parsed as HTML and inserted into the DOM.

It should be noted that you shouldn't append HTML that is from user-generated input without escaping it.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to create a style tag using JavaScript

# Create a style tag using JavaScript

# Create a style tag using insertAdjacentHTML

# Additional Resources

Borislav Hadzhiev