How are you appending elements inside your DOM ( Document Object Model )? Okay, Let me share it to you an amazing snippet/function to make it easier;

Before going further, Welcome to you all in a series of JavaScript Useful Snippet series, where I'm sharing sort codes to make development faster and efficient. If you haven't checked the previous episode go to profile and check now ( hit follow too ) otherwise stay tuned till the end 😃 ...

InsertBefore()

As the name says, it'll be using to add elements before the defined node into DOM. As input, it'll take two arguments where one will be pointing node ( as HTML element ) and the second one will be HTML code or elements ( in a string ) which you want to append into DOM. Let's check out the syntax of a snippet :

 const insertBefore() = (element, htmlString) => 
 element.insertAdjacentHTML("beforebegin", htmlString)

What is insertAdjacentHTML? Well, it's a method of the element interface that parses the specified text as HTML or XML and inserts the resulting elements into the DOM tree before a specified node. This function requires two parameters, first one is position - in this case, it can be either "beforebegin" or "afterbegin" respectively it'll append element before given node or inside of the given node but before first child declaration.

In function, I've taken element and htmlString as arguments. In return, function trigger element method called insertAdjacementHTML with position and HTML string.

Use Case of insertBefore() :

insertBefore( document.getElementById("pointing-element", "<p> hello world </p>")

Here, in the first argument, I've passed the node which has selected from a document by id selector called getElementById ( which will find and return the element with given id ), and in the second argument, I've passed HTML string.

InsertAfter()

This function can be used to include HTML elements after a particular node into DOM. and as a parameter it'll take two arguments, one will be pointing node and second will be a string of HTML content. Let's look at the code of snippet...

const insertAfter() = (element, htmlString) => element.insertAdjacentHTML("afterend", htmlString)

As you see, both code snippets are looks almost the same. Just position argument of insertAdjacentHTML is different. In the case of insertAfter, you can use positions like "afterend" of "beforeend" respectively it'll append after node ends or just before node ends (means after the last child of a node).

Use Case of InsertAfter() :

insertAfter( document.getElementById("pointing-element", "<p> hello world </p>")

That's it guys, I hope you have learned something from this article. Thank you for watching/reading folks, if you found this informative and wanted to make me more content like this please support me on Patreon.

Now, Guys in the next episode I'm going to share a function to get an index of all records who matched with the condition in an array. so follow/subscribe to get notification...

Subscribe on youtube https://www.youtube.com/channel/UCvNjso_gPQIPacA6EraoZmg
Facebook: https://www.facebook.com/KatharotiyaRajnish/
Twitter: https://twitter.com/RajnishK00