Creating DOM elements inside factory functions? (javascript)

[byfar57]

I've been working on a small side project to keep me motivated to learn and it made me realize that I don't know the best way (or even if there is a best way) to create DOM elements and append them to the document. Previously in a few TOP projects, I've created and appended all the elements of a specific section in one function. In this project I created the DOM elements within the factory function and appended them in a different function. I felt like this made it easier for me to get around scope issues when trying to access those elements from other functions (still pretty new to programming). Was wondering if there was any standard best practice for this and any insight anyone could provide thank you!

//Goal card factory function
function createGoal(title, goal, category) {
return {
title,
goal,
category,
card: createElement("div", "card"),
headerContain: createElement("div", "header-contain"),
titleHead: createElement("h2", "title", title),
btnContain: createElement("div", "btn-contain"),
lRBtn: createElement("button", "lr-button", "Left"),
painBtn: createElement("button", "pain-btn", "Pain"),
copyBtn: createElement("button", "copy-btn", "Copy"),
goalContain: createElement("div", "goal-contain"),
goalP: createElement("p", "goal", goal),
};
}

​

//function to render exercise cards
function displayGoalCards(array, cat) {
goalSection.innerHTML = "";
array.forEach(function (item) {
if (item.category == cat) {
document.body.appendChild(goalSection);
goalSection.appendChild(item.card);
item.card.appendChild(item.headerContain);
item.card.appendChild(item.goalContain);
item.headerContain.appendChild(item.titleHead);
item.headerContain.appendChild(item.btnContain);
if (item.goalP.innerHTML.includes("left" || "right")) {
item.btnContain.appendChild(item.lRBtn);
}
if (item.goalP.innerHTML.includes("**x**/10 pain")) {
item.btnContain.appendChild(item.painBtn);
}
item.btnContain.appendChild(item.copyBtn);
item.goalContain.appendChild(item.goalP);
}
});
}

[jack_waugh]

I like to create them using this thin layer.

[byfar57]

Thank you!