/

How to Use insertAdjacentHTML to Insert Content to Web Pages

How to Use insertAdjacentHTML to Insert Content to Web Pages

The insertAdjacentHTML method is a powerful DOM method that allows you to dynamically add new content to a web page. It provides a flexible and convenient way to insert HTML content wherever you need it on the page.

To use insertAdjacentHTML, you need to invoke it on a specific DOM element and provide two parameters: the position where the content should be inserted, and a string that contains the HTML content you want to add.

Here’s an example:

1
2
3
4
5
6
const item = `<div>
 test
 </div>
`

document.querySelector('#container').insertAdjacentHTML('afterend', item)

In the above example, the position is set to 'afterend'. This means that the new HTML content will be added after the #container element.

There are four possible positions you can use with insertAdjacentHTML:

  1. beforebegin: Inserts the content before the specified element.
  2. afterbegin: Inserts the content as the first child of the specified element.
  3. beforeend: Inserts the content as the last child of the specified element.
  4. afterend: Inserts the content after the specified element.

Let’s say you want to add a new item to an existing list. You can achieve this by using insertAdjacentHTML as follows:

1
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

In the above example, the new <li> element containing the text “item” will be added as the last child of the <ul> element.

Using insertAdjacentHTML allows you to dynamically manipulate the content of your web pages and provide a better user experience. Experiment with the different positions and make your website more interactive!

Tags: DOM manipulation, insert HTML content, web development, JavaScript