innerHtml and cross-site scripting attacks

[pat-cki]

Using innerHtml is not the best practice as it can expose your app to cross-site scripting attacks. This is something to be aware of when you will be working on more advanced or professional projects in the future. I recommend you to read this two short articles that explain this issue further:

A safer alternative to innerHTML with vanilla JS
Preventing cross-site scripting attacks when using innerHTML in vanilla JavaScript

[oliverjam]

I have to take credit for this one, my workshop told them to do this 🙃 https://github.com/oliverjam/learn-dom-rendering#innerhtml

You're safe from XSS as long as you don't put user input inside the HTML strings, which as far as I can tell you're not doing here (since you're using createElement to make the dog elements, which are the only place you render user input to the page).

That said Pat is right that you probably won't use innerHTML much on a "real" project as it's safer to just avoid it all together just in case you accidentally allow an XSS vulnerability.