当输入在同样使用 JS DOM 构造的表中时，无法使用 JS DOM 设置输入值

Question

我正在使用 JS DOM 构建一个 HTML 表格。 一些单元格有文本输入，我想在同一个 JS 块中设置这些文本输入的值。似乎无论我做什么，浏览器都拒绝呈现我设置的值。对于以下代码的某些上下文，这发生在类的方法中。该类的构造函数有一个名为“elem”的对象，我在其中预定义了大部分正在使用的元素。一切都完美呈现，但输入 100% 为空。

this.elem.cont = document.createElement('div'); this.elem.hold = document.createElement('div')
this.elem.cont.id = 'popupcont'; this.elem.hold.id = 'popuphold'
this.elem.umTable = document.createElement('table'); this.elem.umTable.id = 'usermantable'
this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Username'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Name'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Password'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Confirm password'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Can blog?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Manage calendar?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Is admin?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umTable.appendChild(this.elem.umRow)
this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.uname : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.name : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'password'
this.elem.uaeInput.id = 'uaepass1'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'password'
this.elem.uaeInput.id = 'uaepass2'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.blogpost : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.calendar : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.admin : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umTable.appendChild(this.elem.umRow)
this.elem.hold.appendChild(this.elem.umTable)
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'button'
this.elem.uaeInput.value = 'Submit'
this.elem.hold.appendChild(this.elem.uaeInput)
this.elem.hold.innerHTML += '<br />Leave the password fields blank if you do not wish to update the user\'s password.<br />'
this.elem.cont.appendChild(this.elem.hold)

然后 cont 被附加到 DOM 中的适当元素。它呈现完美，但无论我尝试什么，文本输入都是空的。我尝试在将输入附加到单元格之前和之后以及将单元格附加到行之后更改值。我为输入、单元格和行创建了新的“让”变量，而不是使用 this.elem 定义的变量。文本输入始终呈现为空。提前感谢您的帮助:-)

Answer 1

我找到了解决此问题的方法。 我没有使用 element.value，而是使用了 element.setAttribute('value', 'blah blah blah...')，这很有效。

太棒了：

this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.uname : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)

变成这样：

this.elem.umRow = document.createElement('tr')    
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.setAttribute('value', edit ? user.uname : '')
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)

希望对某人有所帮助！