innerText не отображается после установки сразу после создания элемента - PullRequest
Новая
       31

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

0 голосов
/ 13 декабря 2018

Я делаю компонент реакции для выбора и отмены выбора тегов.Для этого нужно, чтобы теги отображались в таблице, с флажком рядом с ними.Моя проблема в том, что я не могу установить текстовую часть, когда создаю их через 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)
}

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

enter image description here

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

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)
    }

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

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

enter image description here

1 Ответ

0 голосов
/ 13 декабря 2018

Флажки (в общем случае 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)
// ...

Примечание: в настоящее время ваш код создает несколько элементов input с одинаковыми id (checkTd).Это неверно, только один элемент в документе может иметь этот id.В зависимости от того, что вы делаете, вам может вообще не понадобиться id, или вам может понадобиться добавить к нему суффикс (возможно, используя i), чтобы сделать его уникальным.

...