How to use insertAdjacentHTML
insertAdjacentHTML
is a very cool DOM method we can call on any DOM element to add new content to a page.
It is a nice and flexible way to insert new content.
The method is called on an element and accepts 2 parameters: the position, and a string containing HTML.
Here’s an example:
const item = `<div>
test
</div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)
Notice the afterend
string.
This represents the position we’re going to add the HTML into the container.
We have 4 possible positions:
beforebegin
before the elementafterbegin
before the first children of the elementbeforeend
after the last children of the elementafterend
after the element
Here’s how we would add a new item to a list:
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025