innerText 在创建元素后直接设置后不显示

Question

我正在制作一个用于选择和取消选择标签的反应组件。为此，希望标签显示在 table 中，旁边有一个复选框。我的问题是，当通过 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 时遇到了问题，并且通常让我感觉控制较少。

工作的结果是这样的，我想要实现的是：

Answer 1

复选框（通常为 input 元素）没有内容（它们是 void 元素），因此 innerText 和 textContent 和 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)
// ...

旁注：就目前而言，您的代码创建了多个具有相同 id (checkTd) 的 input 元素。这是无效的，文档中只有 one 元素可以有 id。根据您的操作，您可能根本不需要 id，或者您可能需要为其添加后缀（可能使用 i）以使其独一无二。

innerText 在创建元素后直接设置后不显示

innerText not showing after setting it straight after creating the element

javascript

html

dom

innerhtml

innertext