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 “age” 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 = "Age";
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 = "Age";
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("12345", "18"));
when I need to create an “age” input group.
Does this look correct?