InnerText не отображается после установки сразу после создания элемента

Я делаю компонент реакции для выбора и отмены выбора тегов. Для этого нужно, чтобы теги отображались в таблице с флажком рядом с ними. Моя проблема в том, что я не могу установить текстовую часть при создании их с помощью javaScript. Ни через innerHTML, ни через innerText. Он отображается в инспекторе, но не в моем браузере (Chromium).

Пока мой метод выглядит так:

generateTagTable() {
    let tbl = document.getElementById('tagTable')
    tbl.className = 'tagTable'
    let tbdy = document.createElement('tbody')
    for (let i = 0; i < this.allTags.length; i++) {
        let tr = document.createElement('tr')
        let td = document.createElement('td')
        let div = document.createElement('div')
        let cb = document.createElement('input')
        div.className = 'checkContainer'
        cb.id = 'checkTd'
        cb.type = 'checkbox'
        cb.innerText = 'Tag'
        div.appendChild(cb)
        td.appendChild(div)
        tr.appendChild(td)
        tbdy.appendChild(tr)
    }
    tbl.appendChild(tbdy)
}

Что приводит к следующему:

Я знаю, что могу достичь своей цели, сделав следующее:

generateTagTable() {
        let tbl = document.getElementById('tagTable')
        tbl.className = 'tagTable'
        let tbdy = document.createElement('tbody')
        for (let i = 0; i < this.allTags.length; i++) {
            let tr = document.createElement('tr')
            let td = document.createElement('td')
            td.className = 'checkContainer'
            td.innerHTML = '<div class = "flexcenter"><input type = "checkbox" name = "tagCheck"/>' + this.allTags[i] + '</div>'
            tr.appendChild(td)
            tbdy.appendChild(tr)
        }
        tbl.appendChild(tbdy)
    }

Но это оставляет у меня проблему при попытке назначить onclick и, как правило, оставляет мне меньше контроля, как я чувствую.

Результат рабочего таков, и я пытаюсь достичь этого: