title: Unable to set input value with JS DOM when input is in a table also constructed with JS DOM
body: <p>I'm building an HTML table with JS DOM.
  Some of the cells have text inputs, and I want to set the value of those text inputs in the same block of JS. It seems that no matter what I do, the browser refuses to render the value that I set. For some context on the following code, this takes place in a method of a class. The class's constructor has an object called 'elem' in which I pre-defined most of the elements being used. Everything renders perfectly, but the inputs are 100% empty.</p>
  
  <pre><code>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 += '&lt;br /&gt;Leave the password fields blank if you do not wish to update the user\'s password.&lt;br /&gt;'
  this.elem.cont.appendChild(this.elem.hold)
  </code></pre>
  
  <p>So then the cont is appended to the appropriate element in the DOM. It renders perfectly, but the text inputs are empty no matter what I try. I have tried changing the value before and after appending the input to the cell and after appending the cell to the row. I creating new 'let' variables instead of using the this.elem defined variable for the input, cell, and row. The text inputs always render empty. Thanks in advance for your kind help :-)</p>