What is the best method for manipulating the DOM using JavaScript without exposing your app to new threats or reducing its speed?

Hint: It is certainly not .innerHTML.

In this post, I've defined what DOM manipulation is, explained when you shouldn't use .innerHTML and when to use it, and provided alternative methods that won't reduce the quality of your output when working with large text data!

First, I'd like to assert that I'm a big fan of .innerHTML when manipulating short text data. For instance, my friend @KrisVii (on Twitter) has created this awesome Chat App course on Tinkr.tech where anyone can post their course or learn programming from scratch. The JavaScript course helped me create this demo that's currently hosted on Netlify.

What is the Document Object Model?

Moving on, Mozilla defines the Document Object Model (DOM) as "a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page."

For example, if you want to render some text on the DOM when the user clicks a button, you can add an event listener that listens for click events by starting with an HTML boilerplate and adding a div with an ID called "container" like so:

Manipulating the DOM using .innerHTML

Now it's time for some bitter-sweet JavaScript. First, we add an event listener that can only be triggered after the page has loaded like so:

Once the DOM content has loaded, the application will execute an arrow function that takes in zero arguments and executes the manipulation methods we're about to insert. Let's start with the .innerHTML method.

We'll first assign a variable called "container" that selects the div#container we created in our HTML boilerplate using the .querySelector method. Using .innerHTML, we can welcome a user to their profile once the page has loaded. But there are some caveats to using this strategy.

Disadvantages of .innerHTML

The .innerHTML method is very slow (especially when working with large text documents) because JavaScript has to reparse content when working with this method.

Mozilla defines parsing as "analyzing and converting a program into an internal format that a runtime environment can actually run." Unfortunately, any previously added event listeners will be removed when the div#container is being reparsed. Moreover, hackers can steal session cookies that typically contain private user data using cross-site scripting. So what other options do we have?

Alternatives to .innerHTML

Instead of using innerHTML, we are going to rely on the createElement(), innerText(), and append() methods to manipulate the DOM. Before that, I need to explain again that it is perfectly fine to use innerHTML() when working with small text documents. When you simply alter or insert text inside HTML p or div tags using innerHTML, the method won't really affect the quality of your output.

In contrast, the use-case I explained in paragraph 3 above should not be executed with innerHTML due to obvious reasons. First, lets write some code then I'll explain what's going on in the next paragraph.

In the previous .innerHTML() example, the client will only see the text "Welcome to your profile" when the page loads because this method is only ideal for manipulating small text data. However, we can optimize the experience using .createElement() and .append() methods such that the client can see their profile photo and maybe a button for changing the theme from white to black and vice versa. Since this is a tutorial about DOM manipulation methods, I didn't write any code for changing the theme.

Bringing it all together:

And we're done! That was simple wasn't it? If you have seen a typo or a error you'd like to correct kindly reach out in the comments section. I'm also looking for suggestions on what topics you'd like me to cover next.

Until next time, hüvasti sõbrad!

(Which is the Estonian version of adios amigos).