Add elements dynamically to HTML DOM

addElementsHTML.ts

// parent div
var checkboxDiv = document.querySelector('#must-haves');

if(checkboxDiv.childElementCount > 0) {
 let checkboxDivContents = checkboxDiv.innerHTML;
 let str = checkboxDivContents + '<table><tbody><tr><td><ion-checkbox class="checkbox" checked="true" style="width: 50vw;--border-radius: .35rem;--background: #EEF0F2;--border-color: #EEF0F2;" color="dark"></ion-checkbox></td><td style="position: relative;top: -.19rem;"><span style="margin-left: calc(-50vw + 2.15rem)">'+ instructionData.instruction + '</span></td></tr></tbody></table>';
 checkboxDiv.innerHTML = str; 

} else {
 checkboxDiv.innerHTML = this.addCheckbox(instructionData.instruction);
}
            
addCheckbox(text: string) {
  let str = '<table><tbody><tr><td><ion-checkbox class="checkbox" checked="true" style="width: 50vw;--border-radius: .35rem;--background: #EEF0F2;--border-color: #EEF0F2;" color="dark"></ion-checkbox></td><td style="position: relative;top: -.19rem;"><span style="margin-left: calc(-50vw + 2.15rem)">'+ text + '</span></td></tr></tbody></table>';

  return str;
}