RobG said:
Daz said:
RobG said:
Daz wrote:
Hi everyone!
Is it possible to take a line of text like so:
<tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
And append it to a DOM node such as this:
var nodeToAppendTo = document.getElementById('tbody');
Possible, yes, but you will not get correct results in all browsers.
IE in particular does not like you modifying tables using innerHTML.
[...]
I am developing an XPI for firefox, so cross-browser compatibility
shouldn't be an issue. Perhaps I should have mentioned that, but at the
time I felt that it was off-topic, and of no relevance to my query.
Play with the following:
<button onclick="
document.getElementById('xx').innerHTML =
'<tr><td>new cell 0<td><td>new cell 1';
">Replace using innerHTML</button>
<button onclick="
document.getElementById('xx').innerHTML +=
'<tr><td>new cell 0<td><td>new cell 1';
">Append using innerHTML</button>
<table id="xx">
<tr><td>cell 0<td>cell 1
I can't seem to get my head around why using innerHTML will work for a
<div> but not for a <tbody>.
There is nothing special about a div with regard to innerHTML, however
IE has issues with innerHTML and tables if you replace only part of the
table.
Why does using a temporary element make a
difference?
That was suggested to allow a table to be added using innerHTML in way
that works in IE.
Do <div> elements have some kind of magical power over
other elements. I have to admit, that I generally don't use <div>
elements as much as I should, as I tend to do most of the formatting
using tables, and never really felt that <div> elements would benefit
me at all.
Then you should learn more about using CSS, divs and spans for layout
rather than tables. Some will pursue the topic with religious fervour,
it's more appropriate to discuss it in
comp.infosystems.
www.authoring.html or stylesheets.
An example:
<URL:
http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp >
Hello again. I have also discovered where I was going wrong. After
comparing your cide to mine, I could still see no reason why it wasn't
working. Here's a snippet from my code:
function test()
{
var testAnimal = new aacres_animal("43234");
var table = document.createElement('table');
var tbody = document.createElement('tbody');
tbody.innerHTML = '<tr>'
+'<td>Animal Name</td>'
+'<td>Animal Type</td>'
+'<td>Discipline</td>'
+'<td>Discipline<br />Level</td>'
+'<td>Competitions<br />Entered</td>'
+'</tr>';
table.appendChild(tbody);
table.border = '1';
var newwin = window.open("","", 'height=400, width=400,
titlebar=yes, toolbar=yes');
newwin.document.body.appendChild(table);
tbody.appendChild(testAnimal.mainTR);
}
Now for some reason, this code was not working. After having a play
around with it, I discovered that by appending the tbody to the table,
and THEN using innerHTML to append my 'string of code' to the tbody...
It worked!
So here's the resulting code:
function test()
{
var testAnimal = new aacres_animal("43234");
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);
tbody.innerHTML = '<tr>'
+'<td>Animal Name</td>'
+'<td>Animal Type</td>'
+'<td>Discipline</td>'
+'<td>Discipline<br />Level</td>'
+'<td>Competitions<br />Entered</td>'
+'</tr>';
table.border = '1';
var newwin = window.open("","", 'height=400, width=400,
titlebar=yes, toolbar=yes');
newwin.document.body.appendChild(table);
tbody.appendChild(testAnimal.mainTR);
}
Note that the only thing different is the point at which I append the
tbody, which for some reason has to be 'after' I have appended the
tbody to the table.
Thanks again for all of your help.
Daz.