Element.
Parses a string as HTML and inserts the resulting elements at a chosen position relative to an element.
- Returns
undefined- Changes the original
- Yes
Example
#const chat = document.querySelector('#chat')
chat.insertAdjacentHTML('beforeend', '<li>Jack: Hey, how’s the course going?</li>')
chat.insertAdjacentHTML('afterbegin', '<li class="system">Chat open</li>')
console.log(Array.from(chat.children, (li) => li.textContent))Definition and usage
#The insertAdjacentHTML(position, html) method turns a string into HTML elements and inserts them next to an element, or inside it. Unlike assigning to innerHTML, it doesn’t remove the existing content, so old elements, their event handlers, and their state remain untouched.
The first argument sets the position: "beforebegin" before the element, "afterbegin" at the start of its interior, "beforeend" at the end of its interior, and "afterend" after the element. The "beforebegin" and "afterend" positions require the element to have a parent.
Just like with innerHTML, the inserted text is interpreted as code. Don’t pass data from a user to this method without sanitizing it. For safely inserting text, use insertAdjacentText(), and for ready-made elements, insertAdjacentElement().
Syntax
#element.insertAdjacentHTML(position, html)Parameters
#position
string
The insertion point:"beforebegin","afterbegin","beforeend", or"afterend".html
string
The HTML code to parse and insert.
More examples
#const target = document.querySelector('#target')
target.insertAdjacentHTML('beforebegin', '<p>1. beforebegin</p>')
target.insertAdjacentHTML('afterbegin', '<b>2. afterbegin </b>')
target.insertAdjacentHTML('beforeend', '<b> 3. beforeend</b>')
target.insertAdjacentHTML('afterend', '<p>4. afterend</p>')
console.log(target.previousElementSibling.textContent)
console.log(target.textContent)
console.log(target.nextElementSibling.textContent)const feed = document.querySelector('#feed')
const button = document.querySelector('#load')
button.addEventListener('click', () => {
button.insertAdjacentHTML('beforebegin', '<p>New post in the feed</p>')
console.log('Posts:', feed.querySelectorAll('p').length)
})
button.click()
button.click()
console.log(button.isConnected)The button and its click handler keep working, since the new posts are added alongside it, rather than through rebuilding the whole content like with innerHTML +=.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- To append elements to a list, choose
insertAdjacentHTML("beforeend", html)instead ofinnerHTML +=. The existing elements and their event handlers remain untouched. - Insert data from a user through
insertAdjacentText()ortextContent, never as HTML. - The position names are easy to remember: “begin” and “end” are the element’s opening and closing tag, and “before” and “after” say which side of the tag the new code lands on.
Related entries
#- Element.innerHTMLReads or replaces an element’s content as HTML code.
- Element.append()Adds elements or text at the end of an element’s content.
- document.createElement()Creates a new HTML element with the given tag name, ready to be inserted into the page.
- Node.textContentReads or sets all of an element’s text, without HTML markup.
- Template literalsText templates in backticks: insert values with ${} and span multiple lines.
Spotted a mistake or missing an example? Write to us.