Inserting code stored in variable after selector

Question

I have the following line of code:

var code = document.querySelectorAll('article.shop-the-look')[0];

This code stores some markup that I want to insert after a given selector. What I am looking for is more or less the equivalent to the jQuery insertAfter function, but I need it to be Vanilla JS.

https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib — Jonas Wilms, Oct 05 '17 at 11:39
Possible duplicate of [How to insert an element after another element in JavaScript without using a library?](https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib) — DanteTheSmith, Oct 05 '17 at 11:45

score 0 · Accepted Answer · answered Oct 05 '17 at 11:38

Need to use insertBefore. Take a look at accepted answer to: How to insert an element after another element in JavaScript without using a library?

var code = document.querySelectorAll('article.shop-the-look')[0];
var after = document.querySelectorAll('article.after')[0];
after.parentNode.insertBefore(code, after.nextSibling);

<div>
<article class="shop-the-look">Shop the look</article>
<article class="after">After article, should be "Shop the look"</article>
</div>

Inserting code stored in variable after selector

1 Answers1