创建元素后

Question

我正在制作一个用于选择和取消选择标签的组件。为此，希望标签显示在表格中，并在其旁边有一个复选框。 我的问题是，通过javaScript创建它们时，无法设置其文本部分。既不通过innerHTML也不通过innerText。它显示在检查器中，而不显示在我的浏览器（铬）中。

到目前为止，我的方法如下：

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时，这给我带来了问题，而且通常让我感觉不到控制的程度。

工作的结果是这样，而我想达到的结果是：

Answer 1

复选框（通常为input个元素）没有内容（它们为 void元素），因此innerText和textContent和{{1 }}与它们没有任何功能。

如果您想在复选框旁边输入文本，通常的做法是在其周围加上innerHTML。在标记中，应为：

label

调整代码，您可以这样做：

<label>
    <input type="checkbox">
    Text
</label>

也就是说，通过标记（// ... let td = document.createElement('td') let div = document.createElement('div') let label = document.createElement('label') // *** (added) label.innerText = 'Tag' // *** (moved and modified) let cb = document.createElement('input') div.className = 'checkContainer' cb.id = 'checkTd' cb.type = 'checkbox' label.insertBefore(cb, label.firstChild); // *** (added) div.appendChild(label) // *** (modified) // ... ）会容易得多，并且浏览器非常快解析标记。

tr.innerHTML = ...

---

旁注：就目前而言，您的代码使用相同的// ... let tr = document.createElement('tr') tr.innerHTML = ` <td> <div class="checkContainer"> <label> <input type="checkbox" id="checkTd"> Tag </label> </div> </td>`; tbdy.appendChild(tr) // ... （input）创建了多个id元素。这是无效的，文档中只有一个元素可以具有该checkTd。根据您的操作，您可能根本不需要id，或者可能需要添加后缀（也许使用id）以使其唯一。