Disadvantages of using innerHTML in JavaScript

Javascript Object Oriented Programming Programming

HTML stands for Hyper Text Markup Language, through the HTML we can design a block of webpages. Html is a frontend markup language that is used to build the content of frontend pages. It means that we can build a structure of web pages.

Through HTML we can design the content of any website. It means that we can create headings, buttons, paragraphs, headers, footers, links, etc for any website.

Example

let’s try to understand to implement a program −


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <h1>H1 Heading </h1>
   <p>This is a paragraph </p>
   <a href = "#">Link</a>
   <br><br>
   <button>Button</button>
   <footer>This is a footer</footer>
</body>
</html>

In the above program, we have created a heading, paragraph, link, break tag, button, and footer. As you can see in the above program, we can write an HTML program, in the following ways.

Inner HTML

Inner HTML is just like a property of every HTML element. It means that let’s say we have created a div tag in HTML and inside the div tag, we have created the paragraph tag then we can say that the paragraph tag is an inner HTML and the whole div is an outer HTML.

Also, we can use innerHTML in JavaScript to fetch the property of any tag by using is’t tag name, id, or by class name.

Following is the snippet of code to show an inner HTML −

<div><p>Hello world</p><div>

In the above snippet of code, you can say that the whole div tag is an outer HTML and the whole p tag is an inner HTML.

Example

Let’s try to understand with a suitable example −


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <div>Hello <strong>HTML</strong></div>
</body>
</html>

In the above program, as you can see initially, we created a div tag and inside the div tag, we created the strong tag. So the div tag will be the outer HTML and whatever is written inside the div tag is the inner HTML.

Disadvantages of innerHTML

Following are the disadvantages of using inner HTML −

Inner HTML is slow

Inner HTML is slow because when we use the inner HTML property in the code it allows us to change using the JavaScript language. It is very slow because as inner HTML already parses the content even we have to parse the content again so that’s why it takes time.

Event handlers attached to any DOM element are preserved

When we have used the event handlers then the event handlers are not automatically attached to the new elements created by innerHTML. To change that, we have to track the event handlers and manually attach them to a new element.

It means that first, we have to fetch the element property through innerHTML, and then we have to attach them to a new element.

Example

Let’s try to understand with an appropriate example −


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <p id= 'demo'>Hello</p>
   <button onclick="Change()">Change</button>
   <script>
      function Change()
      {
         let p = document.getElementById('demo');
         p.innerHTML = '<span>Hello World</span>';
      }
   </script>
</body>
</html>

As you can see in the above program first we fetch the element which is already preserved and then we manually attach them to the new element span. you can see the changes in the output screenshots before the event handler and after the event handler.

Some other disadvantages of HTML are −

Replacement is done everywhere

When innerHTML property is used to modify, all the DOM nodes will have to be parsed and created again.

It is not possible to append innerHTML

In JavaScript, ‘+=’ is commonly used for appending. However, when using innerHTML to append to an HTML tag, the entire tag is re-parsed.

Example

<spam id="tp">Tutorials Point</p>
subject = document.getElementById('#tp')

// The whole "tp" tag is reparsed
subject.innerHTML += '<span> Tutorix </span>'

Breaks the document

InnerHTML does not provide proper validation, so any valid HTML code can be used. This has the potential to break the JavaScript document. Even broken HTML can be used, which can cause unexpected issues.

Used for Cross-site Scripting

The text and images or elements in the webpage can used by hackers or malicious users to change the text or data and show some different undesired or threatful content by the other HTML element tag. This leads to change of sensitive and confidential information.