Mention what is the disadvantage of using inner HTML in JavaScript?

[Zinavo]

Mention what is the disadvantage of using inner HTML in JavaScript?

[Jesus Arockia Sankaran S]

Hi Priya, 

Thank you for contacting Syncfusion support. 

We suggest you to check the some of post that we get while googling about this query.  

https://www.tutorialspoint.com/disadvantages-of-using-innerhtml-in-javascript#:~:text=There%20is%20no%20append%20support,changing%20innerHTML%20directly%20very%20slow.&text=innerHTML%20does%20not%20provide%20validation,the%20document%20and%20break%20it. 

https://www.geeksforgeeks.org/what-is-the-disadvantage-of-using-innerhtml-in-javascript/ 

https://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code 

We ask you to post general queries in public discussion forums such as stackonverflow, mozilla developer community forums, etc.. for reaching out wide range of developer fraternity. 

Please get back to us if you have any queries regarding Syncfusion components. 

Regards, 

Jesus Arockia Sankaran S 

[arshiya fouzia]

There is no append support without reparsing the whole innerHTML. This makes changing innerHTML directly very slow. innerHTML does not provide validation and therefore we can potentially insert valid and broken HTML in the document and break it.

[Jesus Arockia Sankaran S]

Hi Arshiya, 

Thank you for the detail. 

Regards, 

Jesus Arockia Sankaran S 

[niki]

The use of inner HTML in JavaScript has the following disadvantages −

There is no append support without reparsing the whole innerHTML. This makes changing innerHTML directly very slow.

For example, for appending to an HTML tag, you'll need to do the following −

let myDiv = document.querySelector('#myDiv')
// Reparses the whole myDiv tag.
myDiv.innerHTML += '<p>Added new tag</p>'

innerHTML does not provide validation and therefore we can potentially insert valid and broken HTML in the document and break it.

[Jesus Arockia Sankaran S]

Hi Niki, Thank you for the information. 

[Harsh Shah]

If we need to add content in current html tag using inner HTML property in javascript it do not support it.

It can not provide functionality like add, append, delete from existing html.

For this , it remove current html and replace with new html.

[Jesus Arockia Sankaran S]

Hi Harsh, Thank you for the detail. 

[Harsh Shah]

The innerHTML property is extremely popular because it provides a simple way to completely replace the contents of an HTML element. Another way to do that is to use the DOM Level 2 API (removeChild, createElement, appendChild) but using innerHTML is by far the easiest and most efficient way to modify the DOM tree. However, innerHTML has few problems of its own that you need to be aware of:

1. Content is replaced everywhere : When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated.
   
   
2. Preserves event handlers attached to any DOM elements : Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually, potentially creating a memory leak on some browsers.
   
   
3. Even if you use +=like "innerHTML = innerHTML + 'html'" still the old content is replaced by html: 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.
   

[Jesus Arockia Sankaran S]

Hi Harsh, Thank you for the details.