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

【问题标题】：innerText not showing after setting it straight after creating the elementinnerText 在创建元素后直接设置后不显示
【发布时间】：2019-05-15 01:33:28
【问题描述】：

我正在制作一个用于选择和取消选择标签的反应组件。为此，希望标签显示在表格中，旁边有一个复选框。我的问题是我无法设置它的文本部分，当通过 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 时留下了问题，并且通常让我感觉控制较少。

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

【问题讨论】：

标签： javascript html dom innerhtml innertext

【解决方案1】：

复选框（一般为input 元素）没有内容（它们是空元素），因此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 元素。这是无效的，文档中只有一个元素可以包含 id。根据您的操作，您可能根本不需要id，或者您可能需要为其添加一个后缀（可能使用i）以使其独一无二。

【讨论】：