Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why split the
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().
Using <script> tag with document.write()
We can add the script tag in the document.write() method. But, it does work as accepted after adding it to this method. To execute properly, we have to split the closing tag of the script into two parts.
We know that the document.write() method is the JavaScript code and must be added to the HTML page's script tag. When we add the script tag inside this method, we have to close it with the usual closing tag of the script. But, the JavaScript assumes that this closing tag is the tag for the outer closing tag of the script. By this, the script tag will be completely closed, and everything added after this will work as an HTML concept, not JavaScript. That is why we have to split the closing tag of <script> when writing it with the document.write() to work the program as usual.
Users can follow the below syntax to use the script tag with the document.write() method.
Syntax
<script> document.write( "<script> <Your script here> </scr" + "ipt>"); </script>
Follow the above syntax to use the script tag with the document.write().
Example
In the example below, we have written two different containers of code. Firstly we tried to execute the code without splitting the script tag. And In the second container, we have split the closing tag of the script tag. After successful execution, we will see the heading and the one-line paragraph on the webpage.
<html>
<body>
<h2> Using <i> document.write() method </i> to write a script in script tag </h2>
<h3 id="heading"> </h3>
<p id="para"> </p>
<script>
document.write(
"<script> document.getElementById('heading').innerHTML='Using <i> document.write() method </i> to write a script in script tag '</scr" + "ipt>");
document.write(
"<script>document.getElementById('para').innerHTML='Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque explicabo iure '
</script>");
</script>
</body>
</html>
This is not the output we are accepting from the program. We have not split the script tag in the second document.write() method. So, let’s try to run after splitting the script tag in the program.
<html>
<body>
<h2> Using <i> document.write() method </i> to write a script in script tag </h2>
<h3 id="heading"></h3>
<p id="para"></p>
<script>
document.write(
"<script> document.getElementById('heading').innerHTML='Using <i> document.write() method </i> to write a script in script tag '</scr" + "ipt>");
document.write(
"<script>document.getElementById('para').innerHTML='Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque explicabo iure '</scr" + "ipt>");
</script>
</body>
</html>
You can look at the output got above exactly as we have accepted. We have split the closing script tag in the document.write() to get the exact output.
In the above example, users can see that to execute the script tag in the document.write() method; we have to split the closing tag of the script tag.
An alternative way to use the script
Using document.write() has not been a good practice. It has some disadvantages, which it is best to avoid as possible. This method also takes decreases the performance of the application.
We can use the JavaScript DOM properties as an alternative for the document.write() method for writing scripts. That can be done by creating a script element and appending it to a document element by adding the script inside it. It is the best practice to follow to execute this task most efficiently.
Users can follow the below syntax to append the script to the document.
Syntax
<script>
var div = document.getElementById( <Enter id here> );
var script = document.createElement("script");
script.innerHTML = " <Enter script content here> ";
div.appendChild(script);
</script>
Follow the above syntax to add a script to the HTML document.
Example
In the example below, we have used the createElement method to create a script element in JavaScript. Then, we added the scripts to it using the innerHTML property. This element has been added to the document body. We will take an input of a number from the user. And the script to find the cube has been added to the script element that is appended to the document’s body.
<html>
<head>
<style>
body {
text-align: center;
}
#div {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<h2> Using <i> createElement method </i> to append scripts to a document </h2>
<label for="number"> Enter a number: </label>
<input type="number" value="0" id="number" name="Number" />
<div id="div"> </div>
<script>
var element = document.createElement("script");
element.innerHTML = "document.getElementById('number').addEventListener('change', function func(){var value=document.getElementById('number').value; value3=value*value*value; ;document.getElementById('div').innerHTML = 'Cube of the above number: ' + value3} )"
document.body.appendChild(element);
</script>
</body>
</html>
In the above example, users can see that we have used the createElement method to create a script and append it to the document’s body.
In this tutorial, we have learned why to split the <script> tag when writing it with the document.write() and an alternative way to create a script.
958 Views
To Continue Learning Please Login