How to detect (when trying to append a created element) if that element has been created once before with JavaScript

Issue

So I'm trying to build a gif/webm/png etc viewer, right now I'm creating elements to then set the file selected to that img (or if it is a webm file, then we'll set it's src to a video element)

Now I'm also building a hide button (the element I want to see if it's already appended) to hide the image or video when it is clicked, so I want to create it... then append it when an image like a gif or png is chosen, but I have made a listener to detect if the file is a webm.

I also want to detect if the document already has the hide button, so therefore I can assign a hide button to either the img element or video separately element because as on my codepen the hide button won't work to hide the video when the img is created first then the video and so forth.

Basically I want to detect if the hide button has been appended before for the img element and/or video element (to prevent duplicates on the page) then delete it and create a new one that will read for the new video or img element.

Solution

So after awhile of trying out things, I came to a conclusion that an if statement could work.

const btnOne = document.createElement("a");
const btnTwo = document.createElement("a");

if(btnOne !== null) {
  if(btnOne.parentNode) {
     btnOne.parentNode.removeChild(btnOne);
  }
  document.body.appendChild(btnTwo);
} else if(btnOne == null){
  document.body.appendChild(btnTwo);
}

this is basically how I did it.

Answered By - Nova