Add HTML with Vanilla Javascript if element doesn't exists in DOM

October 21, 2022

Im trying to add an element to the DOM, but want to add it only if the element doesn’t exist. Since I will use the function in a ajax call as well, it would repeat itself, hence I need to check if the element already exists.

With jQuery this is easy:

if( jQuery(".class").length == 0){
jQuery("<div class='new_div'></div>").appendTo(".toolbar-sorter");
}

How to I do the same check with vanilla JS? Current code:

const element = document.querySelector(".toolbar-sorter")
element.insertAdjacentHTML("beforeend", "<div class='new_div'></div>");

>Solution :

Something like this?

const element = document.querySelector(".toolbar-sorter")

if (document.querySelectorAll(".class").length == 0) {
  element.insertAdjacentHTML("beforeend", "<div class='new_div'></div>")
}