It is pretty well known these days that fiddling with innerHTML is terribly inefficient. It triggers serialization, and it can result in invalid markup. Nevertheless, you’ll still find this being done in many applications.
elem.innerHTML = elem.innerHTML + '<a href="https://www.example.com">Visit Example Dot Com</a>'; // or elem.innerHTML += '<a href="https://www.example.com">Visit Example Dot Com</a>';
You can avoid many of the downsides to this approach using insertAdjacentHTML. Here’s a quick example that is equivalant to the previous operation, but without serialization or potential runiation.
elem.insertAdjacentHTML('beforeend', '<a href="https://www.example.com">Visit Example Dot Com</a>');
That first parameter needs a little explanation. It just allows you to place your new HTML in one of four locations:
- beforebegin
- Immediately before the element
- afterbegin
- Immediately inside the element
- beforeend
- Immediately before the closing tag of the element
- afterend
- Immediately after the closing tag of the element
So, if we take this HTML:
<div id="example">
<div>Existing Element Content</div>
</div>
And we run all of the possible variations, as shown below:
const elem = document.getElementById('example');
elem.insertAdjacentHTML('beforebegin', '<div>Before Begin</div>');
elem.insertAdjacentHTML('afterbegin', '<div>After Begin</div>');
elem.insertAdjacentHTML('beforeend', '<div>Before End</div>');
elem.insertAdjacentHTML('afterend', '<div>After End</div>');
We end up with the following HTML:
<div>Before Begin</div> <div id="example"> <div>After Begin</div> <div>Existing Element Content</div> <div>Before End</div> </div> <div>After End</div>