When you use innerHTML, the browser must re-parse all existing HTML inside the element and rebuild the DOM tree.

In some occasions, it can case issues e.g. re-parsing can cause references to previously constructed DOM elements to become invalid, as the browser essentially reconstructs the DOM tree from scratch for the element.

If the parent DOM element has many children it can also cause performance issues.

Using appendChild to add a new element avoids re-parsing the existing content. Instead, the new node is appended directly to the DOM tree, which is more efficient, and does not break functionality on previously parsed elements.