How to use insertAdjacentHTML
New Courses Coming Soon
Join the waiting lists
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>')
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X