I am making a form that has 4 inputs per item (item #, price, quantity, extended price). I am formatting the form in a table and I want to be able to add another row of inputs when the user clicks the button. it is working in ie but not ff. I realize that i need to change the inputs to innerHTML but nothing is appearing in ff even when i try to append the <p>

function addRow() {
var row = document.createElement('p');
row.appendChild(document.createTextNode("hi"));
document.body.appendChild(row);
var table = document.getElementById('ordertable');
var row = document.createElement('tr');
table.appendChild(row);
var td1 = document.createElement('td');
td1.appendChild(document.createTextNode("hi"));
row.appendChild(td1);
var td2 = document.createElement('td');
td2.appendChild(document.createTextNode('<input name="unit" type="text" size="10" value="">'));
row.appendChild(td2);
var td3 = document.createElement('td');
td3.appendChild(document.createTextNode('<input name="qty" type="text" size="10" value="">'));
row.appendChild(td3);
var td4 = document.createElement('td');
td4.appendChild(document.createTextNode('<input name="ext" type="text" size="10" value="">'));
row.appendChild(td4);
}

------html----------
<table >
<tbody id="ordertable">
<tr>
<td>Part #</td>
<td>Unit Price</td>
<td>Quanity</td>
<td>Extended Price</td>
</tr>
<tr>
<td><input name="part" type="text" size="10" value=""></td>
<td><input name="unit" type="text" size="10" value=""></td>
<td><input name="qty" type="text" size="10" value=""></td>
<td><input name="ext" type="text" size="10" value=""></td>
</tr>
</tbody>
</table>

<a href="javascript:addRow()">Add another row</a><br>