I'd like to use JavaScript to add rows to a table. It seems like an easy idea, but it occurs to me that the parent node of the rows might technically be a TBODY element. So, I'm wondering if I use appendChild to add a table row to a table element am I doing something wrong and, more importantly, is it going to fail in browser x?

For example:

function addTheRow() {
	var myTable = document.getElementById('myTable');
	var newRow  = document.createElement('TR');
	var newCell = document.createElement('TD');
	newCell.appendChild( document.createTextNode('Yeah, Baby! Yeah!!') );
	newRow.appendChild( newCell );

	myTable.appendChild( newRow );
} // End addTheRow function

Should I do something to identify the TBODY element and add the element to that instead?

Thank you.

-- Ghodmode

Do-- document.getElementById('myTable').getElementsByTagName('tbody')[0] to get the tbody instead of the whole table if you want to.
Typically, browsers will try to 'fix' your markup by automatically inserting tbody.

commented: exactly what I needed +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.