Question

I have a function for adding a new row into a table but since i have lots of inner nodes for each td (with lots of attributes for each node) I am just changing the .innerHTML of the row.

However this is causing problems to other functions because the #text node is not inserted.

I’ve tried adding a <text/> tag but that didnt do it..So..any suggestions?

My javascript code is:

var newTrNode = document.createElement('tr');
newTrNode.setAttribute('id', resultArray[0]);

var putInside = '<td><text/><input readonly="readonly" value="'+assetName+'" type="text"  class="field left"/></td><td><input type="text" value="credentials" class="field left" readonly="readonly" /></td><td>';
var rowNode = but.parentNode.parentNode;                                                                    
putInside += rowNode.childNodes[5].innerHTML;
putInside += '</optgroup></select></td><td><input type="text" value="'+resultArray[1]+'" class="field left" readonly="readonly" /></td><td><input type="password" value="'+resultArray[2]+'" class="field left" readonly="readonly" /></td><td><input onClick="editField('+resultArray[0]+',this)"type="button" value="Edit" class="field left"/><input onClick="deleteAsset('+resultArray[0]+')" type="button" value="Delete" class="field left"/><input onClick="lockUnlock('+resultArray[0]+',this, false)" type="button" value="Unlock" class="field left"/><img src="lock.png"/></td>';
newTrNode.innerHTML = putInside;

Answer 1

Don’t use innerHTML to modify the content of a table row (or any part of a table) as it is specified to fail in at least some versions of IE. Use DOM methods. You can use innerHTML for an entire table or the content of cells (TD elements).

There is no text element in HTML, browsers will create text nodes for text in the document. You can create text nodes using the createTextNode method of the document interface:

var textNode = document.createTextNode('text');

You can add rows using innerHTML with a function like:

<script type="text/javascript">

function rowsFromMarkup(table, markup) {
  var div = document.createElement('div');
  div.innerHTML = '<table>' + markup + '<\/table>';
  var rows = div.getElementsByTagName('tr');
  var tbody = table.tBodies[0];

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    tbody.appendChild(rows[i]);
  }
}
</script>

<table id="t0">
 <thead>
  <tr>
    <th>index
    <th>item
 </thead>
 <tbody>
  <tr>
   <td>0
   <td>foo
 </tbody
</table>

<button onclick="
 rowsFromMarkup(document.getElementById('t0'),'<tr><td>1<td>bar');
">Add a row</button>