Member-only story
DOM Manipulation and the Dangers of ‘innerHTML’
5 reasons to avoid 'innerHTML’ when using JavaScript to change the DOM
Introduction
As I was writing some basic JS to do DOM manipulation and event listening, I came across a bug that stumped me. I spent time poring over Stack Overflow, looking for the solution to no avail. To replicate the bug, I’ll present a simplified version of my code.
To start, I had a bare-bones HTML file with a single div in the body:
In the JavaScript file, I added some nodes to the DOM and created an event listener on a button:
In the browser, my page appeared as expected. There’s an image, followed by a button and some additional text I added to the DOM.
From a quick glance at the code, the button has a clearly defined purpose. When it’s clicked, the string hello should be outputted to the console. However, when clicking the button, nothing gets printed. Why?
First, let’s try and find where the bug is being introduced into the code. To start, I’ll comment out the div.innerHTML += line.
Now, when I click the button, everything works as expected. Upon clicking the button, hello is logged to the console.
Clearly, the line with innerHTML += is causing major problems. As a JS programmer, using operators such as ++ and += seems natural. However, using the +=…
