Let’s say we want to add something to a webpage after the initial load. JavaScript gives us a variety of tools. Perhaps you’ve used some of them, like Show The difficult thing about appending and inserting things with JavaScript isn’t so much about the tools it offers, but which one to use, when to use them, and understanding how each one works. Let’s try to clear things up. Super quick contextIt might be helpful to discuss a little background before jumping in. At the simplest level, a website is an HTML file downloaded from a server to a browser. Your browser converts the HTML tags inside your HTML file into a bunch of objects that can be manipulated with JavaScript. These objects construct a Document Object Model (DOM) tree. This tree is a series of objects that are structured as parent-child relationships. In DOM parlance, these objects are called nodes, or more specifically, HTML elements.
In this example, the HTML And I know that some of these terms are weird and possibly confusing. We say “node”, but other times we may say “element” or “object” instead. And, in some cases, they refer to the same thing, just depending on how specific we want to be . For example, an “element” is a specific type of “node”, just like an apple is a specific type of fruit. We can organize these terms from most general, to most specific: Object → Node → Element → HTML Element Understanding these DOM items is important, as we’ll interact with them to add and append things with JavaScript after an initial page load. In fact, let’s start working on that. SetupThese append and insert methods mostly follow this pattern:
Again, an element is merely an object in the DOM Tree that represents some HTML. Earlier, we had mentioned that the purpose of the DOM tree is to give us a convenient way to interact with HTML using JavaScript. So, how do we use JavaScript to grab an HTML element? Querying the DOMLet’s say we have the following tiny bit of HTML:
There are a few common ways to query the DOM:
In this example, all three lines query the same thing, but look for it in different ways. One looks at any of the item’s CSS selectors; one looks at the item’s ID; and one looks at the item’s class. Note that the What we can append and insert
In this example, We can’t just append any old thing to any old object. The
It might help to map out exactly which parameters are supported by which methods:
insertAdjacentText is recommended.2 Instead of taking traditional parameters, innerHTML is used like: element.innerHTML = 'HTML String' How to choose which method to useWell, it really depends on what you’re looking to append, not to mention certain browser quirks to work around.
ExampleLet’s say we have a chat application, and we want to append a user, Dale, to a buddy list when they log in.
Here’s how we’d accomplish this using each of the methods above.
|
Method | Node | HTML Text | Text | Internet Explorer? | Event Listeners | Secure? | HTML Templating |
---|---|---|---|---|---|---|---|
append
| Yes | No | Yes | No | Preserves | Yes | Medium |
appendChild
| Yes | No | No | Yes | Preserves | Yes | Medium |
insertAdjacentHTML
| No | Yes | Yes1 | Yes | Preserves | Careful | Easy |
innerHTML 2
| No | Yes | Yes | Yes | Loses | Careful | Easy |
insertAdjacentText
is recommended.2 Instead of taking traditional parameters,
innerHTML
is used like: element.innerHTML = 'HTML String'
If I had to condense all of that into a few recommendations:
- Using
innerHTML
for appending is not recommended as it removes event listeners. append
works well if you like the flexibility of working with node elements or plain text, and don’t need to support Internet Explorer.appendChild
works well if you like (or need) to work with node elements, and want full browser coverage.insertAdjacentHTML
is nice if you need to generate HTML, and want to more specific control over where it is placed in the DOM.
Dig deeper
The methods discussed above are commonly used, and should cover the majority of your use cases.
That said, there are some additional append/insert methods, if you’re curious:
- before
- after
- insertBefore
- insertAdjacentElement
Last thought and a quick plug :)
This post was inspired by real issues I recently ran into when building a chat application. As you’d imagine, a chat application relies on a lot of appending/inserting — people coming online, new messages, notifications, etc.
That chat application is called Bounce. It’s a peer-to-peer learning chat. Assuming you’re a JavaScript developer (among other things), you probably have something to teach! And you can earn some extra cash.
If you’re curious, here’s a link to the homepage, or my profile on Bounce. Cheers!