What is the Disadvantage of using innerHTML in JavaScript ? - GeeksforGeeks

29 Jan, 2020
The innerHTML property is a part of the Document Object Model (DOM) that is used to set or return the HTML content of an element. Where the return value represents the text content of the HTML element. It allows JavaScript code to manipulate a website being displayed. More specifically, it sets or returns the HTML content (the inner HTML) of an element. The innerHTML property is widely used to modify the contents of a webpage as it is the easiest way of modifying DOM. But there are some disadvantages to using innerHTML in JavaScript.
Disadvantages of using innerHTML property in JavaScript:
The use of innerHTML very slow: The process of using innerHTML is much slower as its contents as slowly built, also already parsed contents and elements are also re-parsed which takes time.
Preserves event handlers attached to any DOM elements: The event handlers do not get attached to the new elements created by setting innerHTML automatically. To do so one has to keep track of the event handlers and attach it to new elements manually. This may cause a memory leak on some browsers.
Content is replaced everywhere: Either you add, append, delete or modify contents on a webpage using innerHTML, all contents is replaced, also all the DOM nodes inside that element are reparsed and recreated.
Appending to innerHTML is not supported: Usually, += is used for appending in JavaScript. But on appending to an Html tag using innerHTML, the whole tag is re-parsed.Example:<p id="geek">Geeks</p>
title = document.getElementById('#geek')

// The whole "geek" tag is reparsed
title.innerHTML += '<p> forGeeks </p>'
Example:
<p id="geek">Geeks</p>
title = document.getElementById('#geek')

// The whole "geek" tag is reparsed
title.innerHTML += '<p> forGeeks </p>'
Old content replaced issue: The old content is replaced even if object.innerHTML = object.innerHTML + ‘html’ is used instead of object.innerHTML += ‘html’. There is no way of appending without reparsing the whole innerHTML. Therefore, working with innerHTML becomes very slow. String concatenation just does not scale when dynamic DOM elements need to be created as the plus’ and quote openings and closings becomes difficult to track.
Can break the document: There is no proper validation provided by innerHTML, so any valid HTML code can be used. This may break the document of JavaScript. Even broken HTML can be used, which may lead to unexpected problems.
Can also be used for Cross-site Scripting(XSS): The fact that innerHTML can add text and elements to the webpage, can easily be used by malicious users to manipulate and display undesirable or harmful elements within other HTML element tags. Cross-site Scripting may also lead to loss, leak and change of sensitive information.
Example:
<!DOCTYPE html> <html>   <head>     <title>        Using innerHTML in JavaScript    </title> </head>   <body style="text-align: center">           <h1 style="color:green">         GeeksforGeeks     </h1>       <p id="P">        A computer science        portal for geeks.    </p>       <button onclick="geek()">        Try it    </button>       <p id="p"></p>       <script>         function geek() {             var x = document.getElementById("P")                        .innerHTML;                           document.getElementById("p")                        .innerHTML = x;                           document.getElementById("p")                        .style.color = "green";         }     </script> </body>   </html>
Output:
JavaScript-Misc
Picked
Technical Scripter 2019
JavaScript
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript