function to get input group for user I got tasked with writing a page that will add as many profile entries as the user wants, and web programming is not at all my field. There are multiple input groups but I'm just using the &quot;age&quot; one as an example. Currently I'm using a function to create DOM elements, then I assemble them together and return the completed outer HTML code. Is this the correct way to do this? Here's my code:
function addInputGroup(userID, userAge) {
                let ageCol = document.createElement('div');
                ageCol.setAttribute('class', 'col-4');
                
                let ageLabel = document.createElement('label');
                ageLabel.setAttribute('class', 'sr-only');
                ageLabel.innerHTML = &quot;Age&quot;;
                
                let ageInputGroup = document.createElement('div');
                ageInputGroup.setAttribute('class', 'input-group');
                
                let ageInputGroupPrepend = document.createElement('div');
                ageInputGroupPrepend.setAttribute('class', 'input-group-prepend');
                
                let ageInputGroupText = document.createElement('div');
                ageInputGroupText.setAttribute('class', 'input-group-text');
                ageInputGroupText.innerHTML = &quot;Age&quot;;
                
                let ageInput = document.createElement('input');
                ageInput.setAttribute('id', 'fldAge'+userID);
                ageInput.setAttribute('type', 'text');
                ageInput.setAttribute('class', 'form-control');
                ageInput.setAttribute('placeholder', userAge);
                ageInput.setAttribute('value', userAge);
                
                //assemble age column
                ageInputGroupPrepend.appendChild(ageInputGroupText);
                ageInputGroup.appendChild(ageInputGroupPrepend);
                ageInputGroup.appendChild(ageInput);
                ageCol.appendChild(ageLabel);
                ageCol.appendChild(ageInputGroup);
                
                return(ageCol.outerHTML);
            }

Then I call document.write(addInputGroup(&quot;12345&quot;, &quot;18&quot;)); when I need to create an &quot;age&quot; input group.
Does this look correct?
DOM
The outer HTML conversion is probably unecessary. You can manipulate DOM nodes directly. The appending could look something like this.
// note that the HTML representation is irrelevant; we go straight to the DOM
document.getElementById('input-groups').appendChild(ageCol)

JS
addInputGroup() seems to be a misleading name, as the function creates a new DOM element; it doesn't do anything with it. createInputGroup() would be more appropriate I think.
You can use const instead of let here. This provides some nice guarantees about consistency, and makes these guarantees immediately visible to the reader.
return(ageCol.outerHTML); is more commonly written as return ageCol.outerHTML;