Can scripts be inserted with innerHTML?

In this tutorial, we will learn that can scripts are inserted with innerHTML.

There are various properties in JavaScript that help in working with the HTML of the current page. The innerHTML property in JavaScript is used to add the Html to the element. It also returns the content present in an element.

Scripts are the programs or codes of JavaScript that makes a webpage interactive and dynamic. We can add the script in the script tag on the same page or another JavaScript page linked with an HTML file.

The HTML is inserted in the innerHTML property for an element. But, the script cannot be inserted in the innerHTML property. If inserted in the innerHTML, it will neither be displayed on the page nor executed. The script in the innerHTML does not do anything on the webpage.

So, let us look at the script inserted with innerHTML and how to add the script to execute.

Inserting a script with innerHTML

The innerHTML is used to replace the content of the Html element with the Html content added to it. It is used for Html content and cannot execute a script with this property. The script added in the innerHTML is also not visible on the screen.

We cannot use the innerHTML for elements for the script. But we can add a script to an element by creating a script named element using the createElement method. We have to add a script inside it using innerHTML and then append it back to the element that has to add a script. In this way, we have to add the script to the script element first and then to the HTML element by appending it to an element.

We are following the below syntax to insert a script with innerHTML.

Syntax

//A wrong way to add a script using innerHTML
var element = document.getElementById("<enter id here>");
element.innerhtml= "<script> Your script here </script>";

//A right way to add a script using innerHTML
var script= document.createElement("script");
script.innerhtml="<script> Your script here </script>";
element.appendChild( script );

We are following the above syntax to check whether can scripts are inserted with innerHTML.

Example

In the example below, we have to display the square of the number entered by the user in the input field. We have added the script in the innerHTML property of an element. But it is not a behavior of this property to execute the script like this. This script has become useless as it does not execute nor display on the screen. So, we have created a script element using the createElement property and added a script inside it using the innerHTML. At last, we have appended this script element to an element in the HTML element.

<div class="execute"></div><div class="code-mirror  language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span> Using the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span> innerHTML property <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> to insert a script <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> Enter a number: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>Number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>func()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Submit <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span>
      function func() {
         //Trying to add a script using innerHTML that will not execute
         var div = document.getElementById("div");
         div.innerHTML =
         '<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span> var 1 = document.getElementById('123').value; var square = value * value; document.getElementById('div').innerHTML ='Square of the number: ' + xyz; <\/script>';
         //Adding a script using innerHTML that will execute
         var script = document.createElement("script");
         script.innerHTML =
         "var value = document.getElementById('number').value; var square = value * value; document.getElementById('div').innerHTML ='Square of the number: ' + square;";
         div.appendChild(script);
         div.style.color = "red";
      }
   <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div>

In the example, users can see that to execute a script using the innerHTML property, we must add it through the script element.

Inserting a script using eval() method with innerHTML

The eval() method is the method in JavaScript that takes the script as a string in its parameter. It will execute the string provided in the parameter as a JavaScript statement and return the script's result. We have to insert the script in double or single quotes because this method provides the script as a string.

All the users can follow the syntax to use eval() method with innerHTML to insert a script.

Syntax

var element = document.getElementById("<enter id here>");
element.innerhtml= eval("<Your script here>");

Follow the above syntax to use eval() method in JavaScript.

Example

In the example, we have used the eval() method to execute a script inside an innerHTML property. From the user, we will take two inputs, showing the subtraction on the screen after clicking a button. The script for subtracting a number has been added inside an eval method in the innerHTML property.

<div class="execute"></div><div class="code-mirror  language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span> Using the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span> eval() method <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> to insert a script through innerHTML <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> First number: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>First<span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> Second number: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>number2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>Second<span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Substract <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span>
      var element = document.getElementById('div');
      document.getElementById("btn").addEventListener("click", func);
      function func() {
         element.innerHTML = eval("element.style.color = 'red'; var first = document.getElementById('number1').value; var second = document.getElementById('number2').value; var Substract = first - second; element.innerHTML = 'Subtraction of the two numbers is: '+ Substract;");
      }
   <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div>

In the above example, users can see that we have used the eval() method to execute a string inside an innerHTML property of JavaScript.

In this tutorial, we have learned how scripts can be inserted with innerHTML.