I think I need to use the insertAfter function but.

I don't know how to apply it.

[Conscientious Reject]

It's me again. Still, just racking my brain trying to learn this stuff. Anyway, I have been creating a gallery engine - as many of you may already be familiar with. Her is the loop I am utilizing right now. It creates table cell buttons for my gallery.

function addRow() {
var myBody = document.getElementById('displayButton')
.getElementsByTagName('tbody')[0];
// Remove row[0], if present
if( row = myBody.getElementsByTagName('tr')[0] )
myBody.removeChild(row);
// Carry on as before
var row = myBody.appendChild( document.createElement('tr'))
for (var i=0, cell; i < arguments.length; i++) {
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) );
cell.onclick = cell_click;
}

The problem is that I only want two columns. I think I have the right plan of attack.
if (previousSibling = myBody.getElementsByTagName('td'))
/*I used this because with only two columns. The second column cell must be the only sort of cell with another cell before it - instead of a row*/
myBody.insertAfter(this.cell, row);
/*anyway I hope you can see my problem I just need to know how to fix it.

[Bernard Marx]

I don't get it yet, but:

previousSibling = myBody.getElementsByTagName('td');

myBody.getElementsByTagName('td') returns a nodeList. This cannot be equal to an element.

[Conscientious Reject]

Well,
here's what I am getting.

<tr><td>pic1</td><td> pic2</td><td> pic3</td></tr>

what I want is:

<tr><td>pic1</td><td> pic2</td></tr>
<tr><td> pic3</td></tr>

Here are some test that doesn't return an error, but doesn't not give me the desired results either. Maybe, it will help you see what I am doing wrong.

function addRow() {
var myBody = document.getElementById('displayButton')
.getElementsByTagName('tbody')[0];
// Remove row[0], if present
if( row = myBody.getElementsByTagName('tr')[0] )
myBody.removeChild(row);
// Carry on
var row = myBody.appendChild( document.createElement('tr'));
for (var i=0, cell; i < arguments.length; i++) {
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) );
cell.onclick = cell_click;

/****here's where I tried inserting a row.*****
if (row.childNodes.length == 1)
myBody.appendChild( document.createElement('tr'))

or

if (cell.previousSibling == cell) {
myBody.appendChild( document.createElement('tr'))
}
*/
}
}

[Conscientious Reject]

whoa!

I just noticed something.

I can't have:

<tr><td>pic1</td><td>pic2</td></tr>
<tr><td>pic3</td></tr>

without setting the attribute to colspan=2. like:

<tr><td>pic1</td><td>pic2</td></tr>
<tr><td colspan=2>pic3</td></tr>

I actually think that this maybe a large part of the problem. So, now I have yet another conditional urgh!

Anyway, I am going to keep trouble shooting.