Disadvantages of using innerHTML in JavaScript

JavascriptObject Oriented ProgrammingFront End Technology

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 a 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.

Published on 16-Sep-2019 11:56:21