javascript button works in ie, not firefox or chrome

Question

Hi, I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:

function addRow(id, sender, message){
  var theTable = document.getElementById('messageTable');
  var lastRow = theTable.rows.length;
  var newRow = theTable.insertRow(lastRow);
  newRow.id = id;

  var cellLeft = newRow.insertCell(0);
  var textNode = document.createTextNode(id);
  cellLeft.appendChild(textNode);

  var secondCell = newRow.insertCell(1);
  var textNode2 = document.createTextNode(sender);
  secondCell.appendChild(textNode2);

  var messageCell = newRow.insertCell(2);
  var messageNode = document.createTextNode(message);
  messageCell.appendChild(messageNode);

  var viewCell = newRow.insertCell(3);
  var viewNode = document.createElement('button');
  viewNode.value = 'View';
  viewNode.onclick = function(){
 alert('clicked: ' + id);
  };
  viewCell.appendChild(viewNode);
}

Answer 1

You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute

Answer 2

<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:

viewNode.appendChild(document.createTextNode('View'));

You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.