JavaScript best way to handle/manipulate DOM elements

I have a local website which has loads of elements triggered by different actions and I was wondering if am I doing it right.

So for instance there is a button that has a function called open() and a completely empty element with an id such as “foo”.

The open() function does the following: It gets the element of id “foo” and sets its innerHTML to a bunch of elements for example creates a with few input fields in it and so on. So it relativey writes a large amount of elements in it.

Honestly I don’t think that this is the proper way to create elements inside an element and manipulate them or add custom attributes or whatever.

I also tried to create a new .html file which has the elements that I wanted to write inside the element with the id “foo” and then on the open() function it would just simply loads the .html file into the “foo” element but I’ve dropped this idea because of the various security risks.

My question is the following:
Is there any optimized and/or more professional way to create/manipulate elements without the INNERHTML or the .HTML() method?

The basics of the code that I tried to explain:

const element = document.getElementById(‘foo’);

function open() {
   element.innerHTML = ‘a bunch of html elements that I dont want to list here’;
}

The second method that I tried:

const element = document.getElementById(‘foo’);

function open(){
   element.html(htmlelements.html);
}

The htmlelements.html contains a bunch of DOM elements.