Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Appending an HTML string to a DOM element.

Reply
Thread Tools

Appending an HTML string to a DOM element.

 
 
Daz
Guest
Posts: n/a
 
      12-19-2006
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.

 
Reply With Quote
 
 
 
 
pcx99
Guest
Posts: n/a
 
      12-19-2006
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></table> tags 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
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      12-19-2006

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

 
Reply With Quote
 
Daz
Guest
Posts: n/a
 
      12-19-2006

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
<div> but not for a <tbody>. Why does using a temporary element make a
difference? 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.

Thanks for your reply.

Daz.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      12-19-2006
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
> <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_ht...ss_layouts.asp >

--
Rob

 
Reply With Quote
 
Daz
Guest
Posts: n/a
 
      12-21-2006

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
> > <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_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.

 
Reply With Quote
 
Daz
Guest
Posts: n/a
 
      12-21-2006

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
> > <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_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.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      12-21-2006
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DOM ? HTML DOM mk834tt@yahoo.com Javascript 1 12-20-2007 01:08 AM
Appending Text To <%# Eval("...") %> In HTML? clintonG ASP .Net 2 01-22-2007 09:45 PM
Convert a XML DOM Object to a HTML DOM Object manjunath.d@gmail.com XML 0 09-20-2005 08:16 AM
Appending HTML inside datagrid cells at runtime. Jared ASP .Net 0 10-01-2004 12:45 AM
Need help appending html code to many html files. Tom HTML 7 09-08-2004 11:55 PM



Advertisments