Adding content to a table row (<TR>) with javascript?

Question

I have a table as follows:

<table>
 <tr>
   <td>col 1</td><td>col2</td>
 </tr>
 <tr id="insert">
   <td>field</td><td>Field 2</td>
 </tr>
 <tr>
   <td>another field</td><td>one more field</td>
 </tr>
</table>

Now the issue is that I need to dynamically insert new rows AFTER the middle row (id = insert). I have a custom javascript function to insert elementsAFTER an element by using an insertBefore call on the next element.

The new rows create successfully using the following javascript:

var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);

However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:

<tr>test</tr>

You see it doesn't want to output the I have specified. The actual script is a lot more complex and so unfortunately manually adding each using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?

I'm baffled, any help is MUCH appreciated.

Answer 1

You can use the native insertCell() method to insert cells.

Give this a try:

Example: http://jsfiddle.net/VzTJa/

var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

or you can accomplish it without your insertAfter() function by using insertRow() as well.

Example: http://jsfiddle.net/VzTJa/1/

var insert = document.getElementById("insert");
var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

---

Give this workaround a try:

Example: http://jsfiddle.net/VzTJa/2/

var temp = '<table><tbody><tr>';
var close_temp = '</tr></tbody></table>';
var temp_div = document.createElement('div');


var html_to_insert = '<td>tester</td><td>tester</td>';

temp_div.innerHTML = temp + html_to_insert + close_temp;
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild);

temp_div.removeChild(temp_div.firstChild);

Basically creates a couple strings representing the opening and closing tags of a table. You concatenate it with your content, and set it as the innerHTMl of a temporary div, then fetch the row you want, and do an .appendChild().

There may be a better way, or you may find a way to improve this one.

I came up with this after glancing at a solution in this article from a guy who apparently worked on IE and is partly responsible for the parser.

Answer 2

If you can use jQuery, try the append method from it. jQuery append reference

If you do find performance to be an issue, you might find an improvement by building up the dynamic DOM you want to add in javascript before appending it to the actual HTML DOM element that will make it visible. This will keep your number of repaints to a minimum.