I'm doing The Odin Project and my current project involves adding elements to the HTML using JS. The webpage should be tabbed with each tab being drawn using a separate JS module. In the instructions here, they say
Each module will export a function that creates a div element, adds the appropriate content and styles to that element and then appends it to the DOM.
As I worked through the project, I felt that I could instead create the elements in the module and have the module export the elements themselves (instead of a function) which are then appended in the main script.
My approach (simplified):
// menu.js
const menu = document.createElement('div');
/* add children to menu */
export default menu;
// index.js
import menu from './menu.js'
const content = document.querySelector('#content')
content.appendChild(menu)
Compared to the suggestion in the project, what are the advantages and disadvantages of each method?
Also if you use a function as suggested, does that mean that we would need to pass the parent element into the function since its not initialized within the module?
Edit: Also, I could be misinterpreting their suggestion where instead of having the function append the elements to the main content element, I should instead have the function return an element similar to my approach, just enclosed in a function à la functional programming.
In my personal experience it depends on how modular you want the module to be. A menu you may want to have a very similar layout throughout the application. However with something like a modal popup you may want to have the module return a skeleton which you can then populate with an element in your index.js
.
You also may want to consider how uniform the structure of your modules are if you intend to reuse them or have someone else work the same modules - in this case I'd think it better that most/all the modules behave in a similar fashion.
Personally, my modules have a snippet of html you add to the body of the page(a one liner like a div) and a js import to interact with the module which will use that html div to do what it needs to do.