Tutorials - HTML Table Add Row - innerHTML vs. DOM vs. cloneNode

Overview

The purpose of this page is to provide some simple examples of adding rows to an existing table. All the examples do the same basic thing, but in different ways. When deciding which technique to use, you may want to refer to some discussion others have had on the topic of how to dynamically manipulate a web page.

In March 2006, Chris Heilmann wrote From DHTML to DOM scripting, which examines many aspects of old DHTML techniques versus DOM scripting. This led to a lot of chatter around the web, especially on the topic of innerHTML vs. DOM.

In general you'll find that innerHTML will perform better. However, when adding rows to an existing table, some DOM methods need to be used, which means you're losing some of the efficiency that you would have had if you created an entire table with innerHTML. The reason I say some DOM methods need to be used is because if you try to concatenate a string like <tr><td>my new row</td></tr> onto the innerHTML of a table, it will not work in Internet Explorer. So what you can do is something like "Example 1: innerHTML" below, which uses insertRow and insertCell, then references the innerHTML of the cell.

You can tell at a glance which techniques have the most concise code. "Example 3: DOM Clone" looks the simplest, and it is if you don't plan on changing any of the content from row to row. If you want to change values, then you'll need to get references to elements in the cloned node. "Example 1: innerHTML" could be more easily modified to change values from row to row. The problem here is the code could get convoluted the more complex the HTML gets. "Example 2: DOM" has the longest code, but since everything is separated out, setting up the code to make changes from row to row is more straightforward.

Example 1: innerHTML

DOM table methods using innerHTML to fill in cells

JavaScript source

function addRowInnerHTML(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  newCell0.innerHTML = '<input type="input" value="cell 0 - text box" style="color: blue;" />';
  var newCell1 = newRow.insertCell(1);
  newCell1.innerHTML = 'cell 1 - just plain text';
}

Example 2: DOM

DOM table methods using DOM to fill in cells

JavaScript source

function addRowDOM(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = 'cell 0 - text box';
  newInput.style.color = 'blue';
  newCell0.appendChild(newInput);
  var newCell1 = newRow.insertCell(1);
  newCell1.appendChild(document.createTextNode('cell 1 - just plain text'));
}

Example 3: DOM Clone

cloneNode to clone an existing row

tblClone header
	cell 1 - just plain text

JavaScript source

function addRowClone(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}

Related mredkj.com Tutorials

For starters, I'd recommend [3], and if you've decided to use a DOM approach, then check out the simple examples of [1] and [2]. Then you could move on the extended examples in [4], [5], and [6]