Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why split the tag when writing it with document.write()?
In this tutorial, we will learn why to split the <script> tag when writing it with the document.write().
The script tag in HTML is added to execute JavaScript code on the webpage. The JavaScript programs must be enclosed with the script tag to execute. There are many methods in JavaScript that add HTML content to the page, like the document.write() method.
The document.write() method is used to delete all the content from the HTML tag or the document and add the content specified in this method to the page. Because of performance degradation and errors in certain conditions, this method is generally avoided using. There are many alternatives to use instead of this method.
So, Let us look at why split the <script> tag when writing it with the document.write().
The Problem with Nested Script Tags
When you write a script tag inside document.write(), the browser's HTML parser encounters a problem. The parser sees the closing </script> tag inside the string and incorrectly assumes it's the closing tag for the outer script block, causing premature termination.
Solution: Split the Closing Tag
To prevent this parsing issue, we split the closing </script> tag by breaking it into two string parts: "</scr" + "ipt>". This prevents the parser from recognizing it as a script closing tag within the string.
Syntax
<script>
document.write("<script> /* Your script here */ </scr" + "ipt>");
</script>
Example: Demonstrating the Problem and Solution
<html>
<body>
<h2>Script Tag Splitting Example</h2>
<h3 id="heading"></h3>
<p id="para"></p>
<script>
document.write(
"<script> document.getElementById('heading').innerHTML='Dynamic Content Added'; </scr" + "ipt>");
document.write(
"<script> document.getElementById('para').innerHTML='This paragraph was created using split script tags.'; </scr" + "ipt>");
</script>
</body>
</html>
In this example, we successfully create script tags dynamically by splitting the closing tag. The content is properly inserted into the DOM elements.
Modern Alternative: Using DOM Methods
Using document.write() is considered bad practice in modern JavaScript. A better approach is to create script elements using DOM methods:
Syntax
var script = document.createElement("script");
script.innerHTML = "/* Your script code here */";
document.body.appendChild(script);
Example: Creating Scripts with DOM Methods
<html>
<head>
<style>
body { text-align: center; }
#result { color: blue; margin-top: 15px; font-size: 18px; }
</style>
</head>
<body>
<h2>Dynamic Script Creation Example</h2>
<label for="number">Enter a number: </label>
<input type="number" value="5" id="number" />
<div id="result"></div>
<script>
var script = document.createElement("script");
script.innerHTML = `
document.getElementById('number').addEventListener('input', function() {
var value = this.value;
var cube = value * value * value;
document.getElementById('result').innerHTML =
'Cube of ' + value + ' = ' + cube;
});
// Trigger initial calculation
document.getElementById('number').dispatchEvent(new Event('input'));
`;
document.body.appendChild(script);
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Modern Practice | Complexity |
|---|---|---|---|
| document.write() with split tags | Poor | Deprecated | Requires tag splitting |
| createElement() + appendChild() | Good | Recommended | Clean and straightforward |
Conclusion
While splitting script tags with document.write() solves parser conflicts, modern web development favors DOM methods like createElement() for better performance and cleaner code. Use DOM manipulation instead of document.write() in new projects.
1K+ Views
