To insert a text or an element after an element, we can use the after() method in the element object in JavaScript.

Let's say we have a HTML structure like this with a div tag and 2 paragraph tags inside it,

<div>
  <p id="para1">I'm paragraph 1</p>
  <p id="para2">I'm paragraph 2</p>
</div>

What if we want to insert a text or another element after the para1 paragraph tag? Well, Don't worry, we can use the after() method of para1 paragraph tag to insert an element or a text.

So first, let's get the reference to the para1 paragraph tag like this,

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

Now let's use the after() method in the para1 element and pass another span element as an argument to the after() method.

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the after() method in the para1 tag
// to add the span tag after the para1 paragraph
// element
para1.after(span);

We can also add text content using the after() method.

// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the after() method in the para1 tag
// to add the span tag after the para1 paragraph
// element
para1.after(span);
para1.after("I'm just a text");

Now the output looks like this,

<!-- 
    I'm paragraph 1
    I'm just a text I'm a span tag
    I'm paragraph 2
 -->

See this example live in JSBin.

Feel free to share if you found this useful 😃.

---