Appending an HTML string to a DOM element.

[Daz]

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');

I have tried using innerHTML, but I think I am misusing it, as it only
seems to append the text, and not the HTML elements.

Many thanks.

Daz.

[pcx99]

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');

I have tried using innerHTML, but I think I am misusing it, as it only
seems to append the text, and not the HTML elements.

Many thanks.

Daz.

I added a division tag (just to make sure you actually have one) and I
added <table></tabletags to your "line of text" because the stuff you
inject into your page still has to be valid html which means if you're
going to insert table elements you need to have the table declaration.
<div id='tbody'></div>

<script src='text/javascript'>

var someString =
'<table><tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr></table>';
var nodeToAppendTo = document.getElementById('tbody');
nodeToAppendTo.innerHTML = someString;

// or just

document.getElementById('tbody').innerHTML = someString;
</script>
Hope that helps you out a bit.

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA

[RobG]

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.

<URL:
http://msdn.microsoft.com/workshop/a.../innerhtml.asp

>

Use DOM methods. An alternative, if you know you are adding table row
elements, is to add HTML to the string to make it a full table, add the
HTML to a temporary element using innerHTML, then extract the bits you
want.

Untested code:

function addTableRowsByInnerHTML (id, rowHTML)
{
var tableHTML = '<table>' + rowHTML + '</table>';
var tempEl = document.createElement('div');
document.body.appendChild(tempEl);
tempEl.innerHTML = tableHTML;
var newRows = tempEl.getElementsByTagName('tr');
var table = document.body.appendChild(id);

for (var i=0, len=newRows.length; i<len; i++){
table.appendChild(newRows[i]);
}

document.body.removeChild(tempEl);
}

However, DOM methods are better. Consider using the widely supported
DOM insertRow and insertCell methods.

insertRow:
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-39872903 >

insertCell:
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016 >

I have tried using innerHTML, but I think I am misusing it, as it only
seems to append the text, and not the HTML elements.

Yes, you're missusing it.

--
Rob

[Daz]

RobG wrote:

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.

<URL:
http://msdn.microsoft.com/workshop/a.../innerhtml.asp

Use DOM methods. An alternative, if you know you are adding table row
elements, is to add HTML to the string to make it a full table, add the
HTML to a temporary element using innerHTML, then extract the bits you
want.

Untested code:

function addTableRowsByInnerHTML (id, rowHTML)
{
var tableHTML = '<table>' + rowHTML + '</table>';
var tempEl = document.createElement('div');
document.body.appendChild(tempEl);
tempEl.innerHTML = tableHTML;
var newRows = tempEl.getElementsByTagName('tr');
var table = document.body.appendChild(id);

for (var i=0, len=newRows.length; i<len; i++){
table.appendChild(newRows[i]);
}

document.body.removeChild(tempEl);
}

However, DOM methods are better. Consider using the widely supported
DOM insertRow and insertCell methods.

insertRow:
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-39872903 >

insertCell:
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016 >

I have tried using innerHTML, but I think I am misusing it, as it only
seems to append the text, and not the HTML elements.

Yes, you're missusing it.

--
Rob

Hi Rob.

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.

I can't seem to get my head around why using innerHTML will work for a
<divbut not for a <tbody>. Why does using a temporary element make a
difference? Do <divelements 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 <divelements would benefit
me at all.

Thanks for your reply.

Daz.

[RobG]

Daz wrote:

RobG wrote:

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
</table>

I can't seem to get my head around why using innerHTML will work for a
<divbut 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 <divelements 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 <divelements 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_ht...ss_layouts.asp >

--
Rob

[Daz]

RobG wrote:

Daz wrote:

RobG wrote:

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
</table>

I can't seem to get my head around why using innerHTML will work for a
<divbut 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 <divelements 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 <divelements 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_ht...ss_layouts.asp >

--
Rob

Thanks for that Rob, you're an absolute star! That tiny piece of code
has made me realise so much more about the DOM than I did before.

I am not bashing the way your code is written, however, I was under the
impression that all tags needed to be closed. Can you advise on whether
it's actually a bad habit, or whether actually it's acceptable to do? I
think it could save a substantial amount of code being sent to the
browser, but I have never seen it before (apart from in my own code
when I forget to close a tag).
Would you actually write code like that for a website, or is it
something you do when your playing with code?
Are there any browsers that wouldn't be able to interpret that code
properly? (Apart from ancient browsers).
Is that how javascript would append elements to the DOM? (Or would it
do that on some browsers, but not all).

All the best, and many thanks for your assistance. :)

Daz.

[Daz]

RobG wrote:

Daz wrote:

RobG wrote:

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
</table>

I can't seem to get my head around why using innerHTML will work for a
<divbut 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 <divelements 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 <divelements 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_ht...ss_layouts.asp >

--
Rob

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.

[RobG]

Daz wrote:

RobG wrote:

[...]

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
</table>

[...]

I am not bashing the way your code is written, however, I was under the
impression that all tags needed to be closed. Can you advise on whether
it's actually a bad habit, or whether actually it's acceptable to do?

Closing tags for td and tr elements are optional.

<URL: http://www.w3.org/TR/html4/struct/tables.html#edef-TD >
<URL: http://www.w3.org/TR/html4/struct/tables.html#edef-TR >

I
think it could save a substantial amount of code being sent to the
browser, but I have never seen it before (apart from in my own code
when I forget to close a tag).
Would you actually write code like that for a website, or is it
something you do when your playing with code?

Just for play, I think it is better to close tags for real work.

Are there any browsers that wouldn't be able to interpret that code
properly? (Apart from ancient browsers).

Any HTML 4 compliant browser should be OK with it. If not, it's a
browser bug.

Is that how javascript would append elements to the DOM? (Or would it
do that on some browsers, but not all).

The DOM is independent of the markup. HTML is just a language that
tells the browser how to build a DOM. Once the DOM is built, the
browser has no further use for the source markup. When converting from
DOM to HTML (say when getting the innerHTML of an element) the browser
may or may not decide to include optional tags - though most seem to as
it is probably simpler to include them rather than decide which ones to
omit.
--
Rob