Understanding innerHTML in Javascript

In Javascript, we have lots of different ways to manipulate DOM elements. DOM elements are the HTML elements we define when we write our scripts. Once we are targetting a particular DOM element, it's often useful to set its contents with new HTML content or to retrieve its HTML content for use somewhere else.

To do this, we use innerHTML. All Javascript DOM-type elements have an innerHTML property attached. Selecting HTML elements with Javascript can be learned about in a lot of depth here, however, the simplest way is to use a method like getElementById:

let getElement = document.getElementById('my-element')

Here, Javascript will look for an element with the id, #my-element in the HTML content of your page. If it exists, it will return a HTMLElement, which will contain an innerHTMLproperty:

let getElement = document.getElementById('my-element')

console.log(getElement.innerHTML)

Now we can easily get the HTML contents, including text, of #my-element. Note: if you use querySelectorAll to select your HTML elements, this will return multiple HTMLElements - so make sure you are only selecting one.

Setting an HTML elements innerHTML

As well as getting innerHTML from an element, we can also redefine it as we see fit. For example, below we can set our elements’ contents to be just an <h1>tag:

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>'

The contents we pass to innerHTML will be parsed as HTML, and rendered to the user. There are two things you should consider when doing this:

• If, for example, you are doing this via API, and someone can submit contents to appear on the page - you can run into some security problems. Therefore, you need to be careful how you use this, so that you don't end up with someone hacking and sending random content or malicious code to many users.
• This will replace all contents within the HTML element - which may not be what you want.

Security concerns with using innerHTML

Regarding security concerns, if you are worried about using this method to set HTML, you can use the setHTML() which will sanatize input and remove any invalid HTML (unlike innerHTML). It also removes code it deems unsafe. Alternatively, you can use textContent - however this will not let you add HTML or scripts to a tag.

For basic manipulations where you are in complete control of what is being done, innerHTML can be used with relatively few concerns. So finally, you want to add content inside your HTML element in addition to what is already there, instead of replacing it while using innerHTML, you can do something like this:

let getElement = document.getElementById('my-element')
getElement.innerHTML = '<h1>Hello World</h1>' + getElement.innerHTML

The above code will add a <h1> tag above the rest of your content - while still keeping your existing content.

Conclusion

innerHTML is a common tool for manipulating or getting HTML content from an element. It's widely used, and good to understand. Although some security concerns exist regarding HTML insertion, in many cases it is a valid method to do this.

Also published here.