Appending more complex HTML elements using JS in a chrome extension

I’m working on my chrome extension to add some HTML elements to a currently existing page I don’t administrate.
I’m using JavaScript with no libraries due to system limitations.

I’ve currently successfully implemented 3 buttons using createElement() + appendChild().

I new want to add a multi level dropdown menu and my current method of adding elements gets very messy very quickly since I have to add all the HTML properties like this:

elementToAdd.id = "btnENG";
elementToADd.innerText = "Button English";

This is not viable for a multi element “ul” “li” dropdown menu since my code quickly becomes illegible (maybe due to my own syntax).

How would one create a complex HTML element or block and append it to an existing page using JS from a Chrome Extension?

Is insertAdjacentHTML good practice?

Is there a way I can add an HTML file to my extension’s manifest.json file and summon an HTML element from that file with JS to be appended on the website?

Thanks for any input.