We will learn how to create a style tag using JavaScript in this article. With three different methods: The appendChild() function, insertBefore() function and the addition assignment operator method, it’s completely up to you. This basic knowledge is beneficial when you work with HTML in Javascript.
How to create a style tag using JavaScript
Using appendChild()
The Node interface’s appendChild() function adds a node to the end of the list of children of a given parent node. appendChild() can move the supplied child, if it is an existing node in the document, from its present location to the new position.
Syntax:
appendChild(node)Parameters:
- node: The node, usually a HTML element, to append to the parent node, which calls the method.
You can create an element of a style tag and then define its properties to adjust the HTML CSS style. Then use this method to add the element you have created to the head element of the HTML.
<html>
<body>
<h1>LearnShareIT</h1>
</body>
</html>let yourStyle = document.createElement("style");
yourStyle.textContent = "body {background-color: pink;}";
document.head.appendChild(yourStyle);Output:
The logic behind this method is very easy to understand. As we have learned to define the CSS style of an HTML webpage, you need to define your settings in the style tag, and the style tag has to be inside the head tag, and the head tag must appear before the body tag, which is both inside the HTML tag.
Using insertBefore()
The Node interface’s insertBefore() function places a node as a child of a given parent node ahead of a reference node. The insertBefore() transfers the specified node to the new place if it already exists in the document.
Syntax:
insertBefore(insertNode, beforeNode)- insertNode: The node to be inserted.
- beforeNode: The node before which insertNode is inserted.
You can create an element of a style tag and then define its properties to adjust the HTML CSS style. Then use this method to add the element you have created before the body tag element of the HTML.
<html>
<head>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>let yourStyle = document.createElement("style");
yourStyle.textContent = "body {background-color: pink;}";
document.head.insertBefore(yourStyle, document.head.children[0]);Output:
The above example added the tag before the first child of the head tag’s children. However, this method only works when the head tag already has some children inside it instead of being empty. Otherwise, if no children element is found inside the head tag, an error will be thrown. Moreover, the style you added may not work because there might be some style defined after it, which causes conflicts due to the same properties. By default, the document will apply which style appears later.
Using an addition assignment operator
The += operator (Append operator) is the addition assignment operator, which adds the right operand’s value to a variable and assigns the outcome to the variable. What happens with the addition assignment operator depends on the types of the two operands. There is a chance of addition or concatenation.
<html>
<body>
<h1>LearnShareIT</h1>
</body>
</html>let yourStyle = document.createElement("style");
yourStyle.textContent = "body {background-color: pink;}";
document.head.innerHTML += yourStyle.outerHTML;Output:
Summary
We have learned how to create a style tag using JavaScript. It would help if you considered each approach’s advantages and disadvantages. Thanks for reading!
Maybe you are interested:
- Remove the “disabled” Attribute using JavaScript
- Call a function if an Element exists using JavaScript
- Append text to a Paragraph element using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
