Insert new HTML without re-rendering

by Posted on

If you are looking for a way to insert new HTML without re-rendering the previous HTML of the node, you have come to the right place. So let’s say you are working in a Javascript application and are rendering new data using innerHTML, we will show you a better way i.e. insertAdjacentHTML. insertAdjacentHTML method accepts a specific position as first argument and HTML text as second argument and insert the HTML as DOM (Document Object Model) at that position.

Why insert new HTML in DOM ?

If you are a frontend developer, there will be times when you need to insert new HTML to existing DOM. For example, in pagination, the data is loaded first. After that, when user clicks on “load more” button, it fetch more data from API and append it. Or if you are working in a chat application, you can see that the previous messages are prepended when you scroll to the top of conversation.

Acceptable positions are:

  • beforebegin: It will insert the HTML before element. So the new HTML will become a previous sibling of that element.
  • afterbegin: This will add the HTML as the first child of the element.
  • beforeend: This will insert HTML as the last child of that element.
  • afterend: And this will add the HTML after the element. So the new HTML will become a next sibling of that element.

Here are simple examples.

beforebegin

This is usefult if you want to prepend the element before a specific node.

<div id="target">I am target.</div>

<script>
    const html = "<p>I am new HTML</p>";
    const target = document.getElementById("target");
    target.insertAdjacentHTML("beforebegin", html);
</script>

Output of this will be:

I am new HTML

I am target.

And your DOM will look like this:

 <p>I am new HTML</p>
<div id="target">I am target.</div>

The paragraph tag became the previous sibling of div tag.

afterbegin

This will add the new HTML as the first child of target node. Change the above line #6 to:

target.insertAdjacentHTML("afterbegin", html);

It’s output will look same but now your DOM will be like this:

<div id="target">
    <p>I am new HTML</p>
    I am target.
</div>

You can see how the paragraph tag became the first child of div tag. The equivalent of this in innerHTML will be:

target.innerHTML = html + target.innerHTML;

But I will explain later why using innerHTML to insert new HTML is a bad idea.

beforeend

If you use “beforeend”, it will add the new HTML as the last child of that element. Change that line again to:

target.insertAdjacentHTML("beforeend", html);

This time, your output will be:

I am target.

I am new HTML

And your DOM will become:

<div id="target">
    I am target.
    <p>I am new HTML</p>
</div>

afterend

This will insert the HTML right after the element, making it the next sibling of target node.

target.insertAdjacentHTML("afterend", html);

Your output will be same as in “beforeend” but your DOM will become:

<div id="target">I am target.</div>
<p>I am new HTML</p>

When to use insertAdjacentHTML over innerHTML ?

innerHTML removes all the event listeners previously attached to the nodes. So if you have a button that has an onclick event listener, after re-rendering it using innerHTML will remove that event. But insertAdjacentHTML keeps the event listeners as they are.

One of the most important difference is performance. innerHTML re-renders the whole node again, while insertAdjacentHTML only insert the new HTML without re-rendering the previous HTML.

When to use innerHTML over insertAdjacentHTML ?

You should use innerHTML only when you have to completely re-write a node. For example, changing the text of a button. If there is any new element that needs to inserted, prepended or appended, it should be done using insertAdjacentHTML.

Post Views: 49

Published by adnanafzal565